
@layer base {

    /* =========================================================================
       ROOT — LIGHT MODE
       ========================================================================= */
    :root {
        /* --- Core Palette --- */
        --background: oklch(1 0 0);
        --foreground: oklch(0.1450 0 0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.1450 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.1450 0 0);
        --primary: oklch(0.5778 0.2282 26.5713);
        --primary-foreground: oklch(1.0000 0 0);
        --secondary: oklch(0.9700 0 0);
        --secondary-foreground: oklch(0.2050 0 0);
        --muted: oklch(0.9700 0 0);
        --muted-foreground: oklch(0.5560 0 0);
        --accent: oklch(0.9700 0 0);
        --accent-foreground: oklch(0.2050 0 0);
        --border: oklch(0.9220 0 0);
        --input: oklch(0.9220 0 0);
        --ring: oklch(0.5778 0.2282 26.5713);
        /* --- Semantic Colors --- */
        --destructive: oklch(0.5770 0.2450 27.3250);
        --destructive-foreground: oklch(1 0 0);
        --destructive-muted: oklch(0.96 0.02 27.33);
        --destructive-muted-foreground: oklch(0.50 0.18 27.33);
        --destructive-border: oklch(0.88 0.06 27.33);
        --warning: oklch(0.7200 0.1700 70.00);
        --warning-foreground: oklch(0.2000 0.05 70.00);
        --warning-muted: oklch(0.97 0.03 70.00);
        --warning-muted-foreground: oklch(0.5000 0.12 70.00);
        --warning-border: oklch(0.88 0.07 70.00);
        --info: oklch(0.5800 0.1800 245.00);
        --info-foreground: oklch(1 0 0);
        --info-muted: oklch(0.95 0.03 245.00);
        --info-muted-foreground: oklch(0.4500 0.14 245.00);
        --info-border: oklch(0.85 0.06 245.00);
        --success: oklch(0.5800 0.1700 150.00);
        --success-foreground: oklch(1 0 0);
        --success-muted: oklch(0.95 0.03 150.00);
        --success-muted-foreground: oklch(0.4200 0.13 150.00);
        --success-border: oklch(0.85 0.06 150.00);
        /* --- Accent Colors --- */
        --color-blue-accent: oklch(0.55 0.22 260);
        --color-blue-accent-bg: oklch(0.95 0.02 260);
        --color-purple-accent: oklch(0.55 0.20 280);
        --color-purple-accent-bg: oklch(0.95 0.02 280);
        --color-orange-accent: oklch(0.65 0.18 40);
        --color-orange-accent-bg: oklch(0.97 0.02 40);
        --color-green-accent: oklch(0.60 0.18 150);
        --color-green-accent-bg: oklch(0.95 0.02 150);
        /* --- Charts --- */
        --chart-1: oklch(0.5778 0.2282 26.5713);
        --chart-2: oklch(0.3182 0.0115 248.1899);
        --chart-3: oklch(0.7176 0.1902 149.6000);
        --chart-4: oklch(0.8562 0.1696 90.9651);
        --chart-5: oklch(0.7159 0.1804 49.4714);
        /* --- Sidebar --- */
        --sidebar: oklch(0.985 0 0);
        --sidebar-foreground: oklch(0.1450 0 0);
        --sidebar-primary: oklch(0.5778 0.2282 26.5713);
        --sidebar-primary-foreground: oklch(1.0000 0 0);
        --sidebar-accent: oklch(0.9700 0 0);
        --sidebar-accent-foreground: oklch(0.2050 0 0);
        --sidebar-border: oklch(0.9220 0 0);
        --sidebar-ring: oklch(0.5778 0.2282 26.5713);
        /* --- Typography — Fonts --- */
        --font-sans: 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-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        /* --- Typography — Scale --- */
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        /* --- Typography — Weight --- */
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --font-extrabold: 800;
        /* --- Spacing --- */
        --spacing: 0.25rem;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        /* --- Radius --- */
        --radius: 0.625rem;
        /* --- Shadows --- */
        --shadow-color: oklch(0 0 0);
        --shadow-opacity: 0.1;
        --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
        --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
        --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
        --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
        --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
        --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
        --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
        --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
        /* --- Component Tokens — Input --- */
        --input-padding-x: 0.75rem;
        --input-padding-y: 0.5rem;
        --input-font-size: var(--text-sm);
        /* --- Component Tokens — Button --- */
        --btn-padding-x: 1rem;
        --btn-padding-y: 0.625rem;
        --btn-font-size: var(--text-sm);
        --btn-font-weight: var(--font-medium);
        /* --- Component Tokens — Card --- */
        --card-padding: 2rem;
        --card-max-width-sm: 420px;
        /* --- Gradients --- */
        --gradient-hero: linear-gradient(135deg, oklch(0.95 0.03 260) 0%, oklch(0.95 0.03 280) 100%);
        --gradient-feature: radial-gradient(circle at 50% 0%, oklch(0.97 0.02 260), transparent 70%);
        /* --- Misc --- */
        --tracking-normal: 0em;
    }


    /* =========================================================================
       DARK MODE
       ========================================================================= */
    .dark {
        /* --- Core Palette --- */
        --background: oklch(0.1450 0 0);
        --foreground: oklch(0.9850 0 0);
        --card: oklch(0.2050 0 0);
        --card-foreground: oklch(0.9850 0 0);
        --popover: oklch(0.2690 0 0);
        --popover-foreground: oklch(0.9850 0 0);
        --primary: oklch(0.5778 0.2282 26.5713);
        --primary-foreground: oklch(1.0000 0 0);
        --secondary: oklch(0.2690 0 0);
        --secondary-foreground: oklch(0.9850 0 0);
        --muted: oklch(0.2690 0 0);
        --muted-foreground: oklch(0.7080 0 0);
        --accent: oklch(0.3710 0 0);
        --accent-foreground: oklch(0.9850 0 0);
        --border: oklch(0.2750 0 0);
        --input: oklch(0.3250 0 0);
        --ring: oklch(0.5778 0.2282 26.5713);
        /* --- Semantic Colors --- */
        --destructive: oklch(0.7040 0.1910 22.2160);
        --destructive-foreground: oklch(0.9850 0 0);
        --destructive-muted: oklch(0.22 0.05 27.33);
        --destructive-muted-foreground: oklch(0.75 0.15 27.33);
        --destructive-border: oklch(0.35 0.10 27.33);
        --warning: oklch(0.7800 0.1500 70.00);
        --warning-foreground: oklch(0.1500 0.04 70.00);
        --warning-muted: oklch(0.22 0.04 70.00);
        --warning-muted-foreground: oklch(0.7500 0.12 70.00);
        --warning-border: oklch(0.35 0.08 70.00);
        --info: oklch(0.6500 0.1600 245.00);
        --info-foreground: oklch(0.1500 0 0);
        --info-muted: oklch(0.22 0.05 245.00);
        --info-muted-foreground: oklch(0.7000 0.12 245.00);
        --info-border: oklch(0.35 0.09 245.00);
        --success: oklch(0.6500 0.1500 150.00);
        --success-foreground: oklch(0.1500 0 0);
        --success-muted: oklch(0.22 0.04 150.00);
        --success-muted-foreground: oklch(0.7000 0.12 150.00);
        --success-border: oklch(0.35 0.08 150.00);
        /* --- Accent Colors --- */
        --color-blue-accent: oklch(0.60 0.20 260);
        --color-blue-accent-bg: oklch(0.25 0.04 260);
        --color-purple-accent: oklch(0.60 0.18 280);
        --color-purple-accent-bg: oklch(0.25 0.04 280);
        --color-orange-accent: oklch(0.70 0.16 40);
        --color-orange-accent-bg: oklch(0.27 0.03 40);
        --color-green-accent: oklch(0.65 0.16 150);
        --color-green-accent-bg: oklch(0.25 0.03 150);
        /* --- Charts --- */
        --chart-1: oklch(0.5778 0.2282 26.5713);
        --chart-2: oklch(0.8428 0.0090 247.9335);
        --chart-3: oklch(0.7176 0.1902 149.6000);
        --chart-4: oklch(0.8562 0.1696 90.9651);
        --chart-5: oklch(0.7159 0.1804 49.4714);
        /* --- Sidebar --- */
        --sidebar: oklch(0.2050 0 0);
        --sidebar-foreground: oklch(0.9850 0 0);
        --sidebar-primary: oklch(0.5778 0.2282 26.5713);
        --sidebar-primary-foreground: oklch(1.0000 0 0);
        --sidebar-accent: oklch(0.2690 0 0);
        --sidebar-accent-foreground: oklch(0.9850 0 0);
        --sidebar-border: oklch(0.2750 0 0);
        --sidebar-ring: oklch(0.5778 0.2282 26.5713);
        /* --- Gradients --- */
        --gradient-hero: linear-gradient(135deg, oklch(0.20 0.05 260) 0%, oklch(0.20 0.05 280) 100%);
        --gradient-feature: radial-gradient(circle at 50% 0%, oklch(0.22 0.04 260), transparent 70%);
    }


    /* =========================================================================
       GLOBAL ELEMENT STYLES
       ========================================================================= */
    * {
        border-color: var(--border);
    }

    body {
        background-color: var(--background);
        color: var(--foreground);
        font-family: var(--font-sans);
    }
}


/* =============================================================================
   TAILWIND V4 THEME INTEGRATION
   ============================================================================= */
@theme inline {
    /* Colors */
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    /* Semantic Colors */
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-destructive-muted: var(--destructive-muted);
    --color-destructive-muted-foreground: var(--destructive-muted-foreground);
    --color-destructive-border: var(--destructive-border);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-warning-muted: var(--warning-muted);
    --color-warning-muted-foreground: var(--warning-muted-foreground);
    --color-warning-border: var(--warning-border);
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);
    --color-info-muted: var(--info-muted);
    --color-info-muted-foreground: var(--info-muted-foreground);
    --color-info-border: var(--info-border);
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-success-muted: var(--success-muted);
    --color-success-muted-foreground: var(--success-muted-foreground);
    --color-success-border: var(--success-border);
    /* Charts */
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    /* Sidebar */
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    /* Typography — Fonts */
    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --font-serif: var(--font-serif);
    /* Typography — Scale */
    --text-xs: var(--text-xs);
    --text-sm: var(--text-sm);
    --text-base: var(--text-base);
    --text-lg: var(--text-lg);
    --text-xl: var(--text-xl);
    --text-2xl: var(--text-2xl);
    --text-3xl: var(--text-3xl);
    /* Typography — Weight */
    --font-weight-normal: var(--font-normal);
    --font-weight-medium: var(--font-medium);
    --font-weight-semibold: var(--font-semibold);
    --font-weight-bold: var(--font-bold);
    --font-weight-extrabold: var(--font-extrabold);
    /* Spacing */
    --spacing-1: var(--space-1);
    --spacing-2: var(--space-2);
    --spacing-3: var(--space-3);
    --spacing-4: var(--space-4);
    --spacing-5: var(--space-5);
    --spacing-6: var(--space-6);
    --spacing-8: var(--space-8);
    /* Radius */
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    /* Shadows */
    --shadow-2xs: var(--shadow-2xs);
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow: var(--shadow);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --shadow-2xl: var(--shadow-2xl);
}
