@layer variables {
    :root {
        /*
        |--------------------------------------------------------------------------
        | Colors (Light Mode)
        |--------------------------------------------------------------------------
        */

        /* Foreground (Text/Icons) */
        --color-foreground: #333333; /* Main text (headings, body). */
        --color-foreground-secondary: #666666; /* Secondary text (captions, labels). */
        --color-foreground-on-primary: #ffffff; /* Text color over a primary background. */

        /* Background (Surfaces) */
        --color-background-app: #ffffff; /* The main app canvas. */
        --color-background-body: #f0f4f9; /* When the app is centered on large screens */
        --color-background-surface: #f7f7f7; /* Elevated surfaces (cards, inputs). */

        /* Brand & Accent (Interactive) */
        --color-primary: #4a90e2; /* Main brand color, primary actions. */
        --color-primary-hover: #357bd1; /* Hover/active state for primary. */
        --color-secondary: #50e3c2; /* Accent color, supporting actions. */
        --color-secondary-hover: #31bd9e; /* Hover/active state for secondary. */

        /* Structural & State */
        --color-border: #cccccc; /* Dividers, outlines. */
        --color-state-disabled: #dddddd; /* Disabled elements. */

        /* Feedback and help */
        --color-feedback-info: var(--color-primary); /* Information alerts. */
        --color-feedback-success: #7ed321;
        --color-feedback-warning: #f8e71c;
        --color-feedback-danger: #d0021b;
        --color-feedback-danger-hover: #f56271;
        --color-help: #6c757d;
        /*
        |--------------------------------------------------------------------------
        | Spacing Scale (REM)
        |--------------------------------------------------------------------------
        | Base 8px (0.5rem) increment. Raw units for gap.
        */

        --space-xs: 0.25rem; /* 4px */
        --space-sm: 0.5rem; /* 8px */
        --space-md: 1rem; /* 16px - Base content unit */
        --space-lg: 1.5rem; /* 24px */
        --space-xl: 2rem; /* 32px */
        --space-2xl: 3rem; /* 48px */

        /* Padding Aliases (Internal Spacing) */
        --pad-none: 0;
        --pad-xs: var(--space-xs);
        --pad-sm: var(--space-sm); /* Tight padding (e.g., buttons). */
        --pad-md: var(--space-md); /* Standard padding (e.g., cards). */
        --pad-lg: var(--space-lg);
        --pad-xl: var(--space-xl);

        /* Margin Aliases (External Separation) */
        --margin-none: 0;
        --margin-sm: var(--space-sm);
        --margin-md: var(--space-md); /* Standard separation between components. */
        --margin-lg: var(--space-lg); /* Section break separation. */
        --margin-xl: var(--space-xl);

        /*
        |--------------------------------------------------------------------------
        | Borders & Radius (PX)
        |--------------------------------------------------------------------------
        */

        /* Thickness */
        --border-thickness-base: 1px;
        --border-thickness-thick: 2px; /* For focus rings, emphasis. */
        --border-thickness-none: 0;

        /* Radius */
        --radius-sm: 4px;
        --radius-md: 8px; /* Default for cards. */
        --radius-lg: 12px;
        --radius-full: 9999px; /* Pill/circle shape. */

        /*
        |--------------------------------------------------------------------------
        | Shadows & Z-Index
        |--------------------------------------------------------------------------
        */

        /* Shadows */
        --color-shadow: rgba(0, 0, 0, 0.1); /* Shadow base color. */
        --shadow-sm: 0 1px 3px var(--color-shadow);
        --shadow-md: 0 4px 6px var(--color-shadow);
        --shadow-lg: 0 10px 20px var(--color-shadow); /* For modals/popovers. */

        /* Z-Index (Layering) */
        --z-index-base: 1;
        --z-index-sticky: 100; /* Headers, Footers. */
        --z-index-dropdown: 500; /* Tooltips, Popovers. */
        --z-index-overlay: 1000; /* Modals, Toasts. */


        /*
        |--------------------------------------------------------------------------
        | Typography
        |--------------------------------------------------------------------------
        */

        /* Font Families */
        --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* System font stack. */
        --font-family-mono: "SF Mono", "Consolas", "Monaco", monospace; /* Monospace for financial data/code. */

        /* Font Weights */
        --font-weight-regular: 400;
        --font-weight-medium: 500; /* Button text, emphasis. */
        --font-weight-bold: 700; /* Headings, strong emphasis. */

        /* Font Sizes (REM) */
        --font-size-xs: 0.75rem; /* Captions. */
        --font-size-sm: 0.875rem; /* Secondary labels. */
        --font-size-base: 1rem; /* Default body text. */
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 2rem; /* Largest titles. */

        /* Line Height (Unitless) */
        --line-height-base: 1.5; /* Ideal for body text. */
        --line-height-heading: 1.2; /* Tighter for titles. */
        --line-height-tight: 1.0; /* Minimal for buttons/badges. */
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        /*
        |--------------------------------------------------------------------------
        | Colors (Dark Mode Overrides)
        |--------------------------------------------------------------------------
        */

        /* Foreground */
        --color-foreground: #ffffff;
        --color-foreground-secondary: #aaaaaa;
        --color-foreground-on-primary: #ffffff;

        /* Background */
        --color-background-app: #121212;
        --color-background-surface: #1e1e1e; /* Elevated surface. */

        /* Brand & Accent */
        --color-primary: #6daaf7; /* Brighter for contrast. */
        --color-primary-hover: #5494d4;
        --color-secondary: #74f5d3;
        --color-secondary-hover: #50e3c2;

        /* Structural & State */
        --color-border: #333333;
        --color-state-disabled: #333333;

        /* Shadows */
        --color-shadow: rgba(255, 255, 255, 0.05); /* Faint white shadow. */

        /* Feedback colors */
        --color-feedback-info: var(--color-primary);
        --color-feedback-success: #9de54d;
        --color-feedback-warning: #ffec43;
        --color-feedback-danger: #e2374d;
    }
}