@layer customer_theme {
    :root {
        /* Surface Colors */
        --surface-primary: #FFFFFF;
        /* Bright white for main surfaces */
        --surface-second: #f2f4f5;
        /* Soft gray for secondary surfaces */
        --surface-third: #F5F7FA;
        /* 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: #E5E7ED;
        /* Light gray for borders */

        --dark-surface-primary: #1D1F22;
        /* Dark gray for main dark surfaces */
        --dark-surface-second: #535762;
        /* Slightly lighter dark gray */
        --dark-surface-third: #36383E;
        /* Medium dark gray for tertiary surfaces */
        --dark-foreground-primary: #FFFFFF;
        /* Off-white for primary dark text */
        --dark-foreground-second: #D0D4DD;
        /* Light gray for secondary dark text */
        --dark-foreground-third: #B4B9C4;
        /* Mid-gray for subtle dark text */
        --dark-foreground-contrast: #ffffff;
        /* White for high-contrast dark text */
        --dark-border: #999EAB;
        /* Dark gray for borders */

        /* Primary Colors */
        --primary: #001F5B;
        /* Vibrant red for emphasis */
        --primary-hover: #7F8FAD;
        /* Darker red for hover states */
        --primary-mid: #526790;
        /* Softer mid-tone red */
        --primary-light: #F5F7FA;
        /* Light red for backgrounds */
        --ring: #001e5b21;

        /* Secondary Colors */
        --secondary: #FAB900;
        /* Vibrant yellow for emphasis */
        --secondary-hover: #FDE08F;
        /* Darker yellow for hover states */
        --secondary-mid: #FCD052;
        /* Softer mid-tone yellow */
        --secondary-light: #FCF7DB;
        /* 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(--info);
        --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);
    }

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

@layer components{
    button[data-role="reset-layout"],
    button[data-role="link-to"],
    button[data-role="trigger-search"],
    button[data-role="create-payment"],
    button[data-role="begin-checkout"],
    button[data-role="create_firm"],
    button[data-role="cases_reset"],
    button[data-role*="new"],
    button[data-role="create"],
    button[data-role="create-contract"],
    button[data-role="create_group"],
    .secondary-btn{
        color: var(--primary) !important;
    }

    button[data-role="reset-layout"]:hover,
    button[data-role="link-to"]:hover,
    button[data-role="trigger-search"]:hover,
    button[data-role="create-payment"]:hover,
    button[data-role="begin-checkout"]:hover,
    button[data-role="create_firm"]:hover,
    button[data-role="cases_reset"]:hover,
    button[data-role*="new"]:hover, button[data-role*="new"].ui-state-hover,
    button[data-role="create"].ui-state-hover, button[data-role="create"]:hover,
    button[data-role="create-contract"].ui-state-hover, button[data-role="create-contract"]:hover,
    button[data-role="create_group"]:hover, button[data-role="create_group"].ui-state-hover,
    .secondary-btn.ui-state-hover, .secondary-btn:hover {
        color: var(--primary) !important;
    }

    button[data-role="reset-layout"]:active,
    button[data-role="link-to"]:active,
    button[data-role="trigger-search"]:active,
    button[data-role="create-payment"]:active,
    button[data-role="begin-checkout"]:active,
    button[data-role="create_firm"]:active,
    button[data-role="cases_reset"]:active,
    button[data-role*="new"]:active,
    button[data-role="create"]:active,
    button[data-role="create-contract"]:active,
    button[data-role="create_group"]:active,
    .secondary-btn:active, .secondary-btn.ui-state-active {
        color: var(--primary) !important;
    }

    button[data-role="reset-layout"]:focus,
    button[data-role="link-to"]:focus,
    button[data-role="trigger-search"]:focus,
    button[data-role="create-payment"]:focus,
    button[data-role="begin-checkout"]:focus,
    button[data-role="create_firm"]:focus,
    button[data-role="cases_reset"]:focus,
    button[data-role*="new"]:focus,
    button[data-role="create"]:focus,
    button[data-role="create-contract"]:focus,
    button[data-role="create_group"]:focus,
    .secondary-btn:focus, .secondary-btn.ui-state-focus {
        color: var(--primary) !important;
    }
}