/* Define CSS custom properties (variables) for theming */
/* Define CSS custom properties (variables) */
@layer reset, base, components, utilities, customer_theme;

/* Import component styles */
/* @import url('./theme/misc.css');
@import url('./theme/navigation.css');
@import url('./theme/select.css');
@import url('./theme/buttons.css');
@import url('./theme/slider.css');
@import url('./theme/sections.css');
@import url('./theme/input.css');
@import url('./theme/table.css');
@import url('./theme/datepicker.css');
@import url('./theme/slideover.css');
@import url('./theme/layout.css');
@import url('./theme/toast.css'); 
@import url('./theme/icons.css');
@import url('./theme/customer_theme.css');*/



@layer base {
    :root {
        /* Surface Colors */
        --surface-primary: #FFFFFF;
        /* Bright white for main surfaces */
        --surface-second: #F5F5F5;
        /* Soft gray for secondary surfaces */
        --surface-third: #FAFAFA;
        /* Slightly darker gray for tertiary surfaces */
        --foreground-primary: #0A0A0A;
        /* Near-black for primary text */
        --foreground-second: #737373;
        /* Mid-gray for secondary text */
        --foreground-third: #A1A1A1;
        /* Light gray for subtle text */
        --foreground-contrast: #ffffff;
        /* White for high-contrast text */
        --border: #E5E5E5;
        /* Light gray for borders */

        --dark-surface-primary: #0A0A0A;
        /* Dark gray for main dark surfaces */
        --dark-surface-second: #262626;
        /* Slightly lighter dark gray */
        --dark-surface-third: #171717;
        /* Medium dark gray for tertiary surfaces */
        --dark-foreground-primary: #FFFFFF;
        /* Off-white for primary dark text */
        --dark-foreground-second: #D4D4D4;
        /* Light gray for secondary dark text */
        --dark-foreground-third: #A1A1A1;
        /* Mid-gray for subtle dark text */
        --dark-foreground-contrast: #ffffff;
        /* White for high-contrast dark text */
        --dark-border: #525252;
        /* Dark gray for borders */

        /* Primary Colors */
        --primary: #106CFF;
        /* Vibrant red for emphasis */
        --primary-hover: #278CFF;
        /* Darker red for hover states */
        --primary-mid: #88CCFF;
        /* Softer mid-tone red */
        --primary-light: #EDF7FF;
        /* Light red for backgrounds */
        --ring: #106cff33;

        /* Secondary Colors */
        --secondary: #F34807;
        /* Vibrant yellow for emphasis */
        --secondary-hover: #FE6211;
        /* Darker yellow for hover states */
        --secondary-mid: #FFB071;
        /* Softer mid-tone yellow */
        --secondary-light: #FFF6ED;
        /* Light yellow for backgrounds */

        /* Info Colors */
        --info: #0260E7;
        /* Rich blue for informational elements */
        --info-hover: #277EFC;
        /* Darker blue for hover */
        --info-mid: #0151c2;
        /* Lighter mid-tone blue */
        --info-light: #EDF3FD;
        /* Very light blue for backgrounds */

        /* Destructive Colors */
        --destructive: #E7000B;
        /* Strong red for destructive actions */
        --destructive-hover: #FB2C36;
        /* Darker red for hover */
        --destructive-mid: #c2050e;
        /* Mid-tone red */
        --destructive-light: #FEF2F2;
        /* Light red for backgrounds */

        /* Success Colors */
        --success: #00A63E;
        /* Deep green for success states */
        --success-hover: #00C951;
        /* Darker green for hover */
        --success-mid: #028b34;
        /* Brighter mid-tone green */
        --success-light: #F0FDF4;
        /* Light green for backgrounds */

        /* Warning Colors */
        --warning: #E17100;
        /* Bold orange for warnings */
        --warning-hover: #FD9A00;
        /* Slightly darker orange for hover */
        --warning-mid: #be6002;
        /* Mid-tone orange */
        --warning-light: #FFD230;
        /* Light orange for backgrounds */


        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

        /* Gradients */
        --primary-gradient-start: #f97316;
        --primary-gradient-end: #fb923c;

        /* Legacy Color Palette for backward compatibility */
        --color-transparent: transparent;
        --color-current: currentColor;
        --color-black: #000000;
        --color-white: #ffffff;

        /* Primary Colors */
        --color-blue-500: #2e6e9e;
        --color-blue-600: #215781;
        --color-red-500: #ef4444;
        --color-red-600: #dc2626;
        --color-green-500: #22c55e;
        --color-green-600: #16a34a;
        --color-yellow-500: #eab308;
        --color-yellow-600: #ca8a04;
        --color-indigo-500: #6366f1;
        --color-indigo-600: #4f46e5;
        --color-purple-500: #8b5cf6;
        --color-purple-600: #7c3aed;
        --color-pink-500: #ec4899;
        --color-pink-600: #db2777;

        /* Typography */
        --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

        /* Font Sizes */
        --root-font-size: 13px;

        --font-size-xs: 0.75rem;
        /* 12px */
        --font-size-sm: 0.875rem;
        /* 14px */
        --font-size-base: 1rem;
        /* 16px */
        --font-size-lg: 1.125rem;
        /* 18px */
        --font-size-xl: 1.25rem;
        /* 20px */
        --font-size-2xl: 1.5rem;
        /* 24px */
        --font-size-3xl: 1.875rem;
        /* 30px */
        --font-size-4xl: 2.25rem;
        /* 36px */
        --font-size-5xl: 3rem;
        /* 48px */
        --font-size-6xl: 3.75rem;
        /* 60px */
        --font-size-7xl: 4.5rem;
        /* 72px */
        --font-size-8xl: 6rem;
        /* 96px */
        --font-size-9xl: 8rem;
        /* 128px */

        /* Line Heights */
        --line-height-none: 1;
        --line-height-tight: 1.25;
        --line-height-snug: 1.4;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.625;
        --line-height-loose: 2;

        --btn-radius: 8px;
        --input-radius: 8px;
        --widget-radius: 8px;
        --table-radius: 8px;

        --input-focus-border: var(--primary);
        --input-slider-color: var(--info);
        --input-slider-thumb: var(--color-white);

        --chart-color1: var(--destructive);
        --chart-color2: var(--success);
        --chart-color3: var(--info);
        --chart-color4: var(--color-purple-600);
        --chart-color5: var(--color-yellow-600);
        --chart-color6: var(--color-pink-600);
    }

    :root {
        font-size: var(--root-font-size);
    }
}