/**
 * GeneX Design System — CSS Custom Properties
 * 
 * All visual values are defined here.
 * Dark mode overrides are at the bottom.
 * Components reference these variables — never hard-code colors.
 */

:root {
    /* ============================================
       COLOR SYSTEM — LIGHT MODE (default)
       ============================================ */

    /* Primary Brand */
    --color-primary-50: #f0f4ff;
    --color-primary-100: #dbe4ff;
    --color-primary-200: #bac8ff;
    --color-primary-300: #91a7ff;
    --color-primary-400: #748ffc;
    --color-primary-500: #5c7cfa;
    --color-primary-600: #4c6ef5;
    --color-primary-700: #4263eb;
    --color-primary-800: #3b5bdb;
    --color-primary-900: #364fc7;

    /* Secondary — Accent (warm, energetic) */
    --color-accent-50: #fff9db;
    --color-accent-100: #fff3bf;
    --color-accent-200: #ffec99;
    --color-accent-300: #ffe066;
    --color-accent-400: #ffd43b;
    --color-accent-500: #fcc419;
    --color-accent-600: #fab005;
    --color-accent-700: #f59f00;
    --color-accent-800: #f08c00;
    --color-accent-900: #e67700;

    /* Success */
    --color-success-50: #ebfbee;
    --color-success-100: #d3f9d8;
    --color-success-200: #b2f2bb;
    --color-success-300: #8ce99a;
    --color-success-400: #69db7c;
    --color-success-500: #51cf66;
    --color-success-600: #40c057;
    --color-success-700: #37b24d;
    --color-success-800: #2f9e44;
    --color-success-900: #2b8a3e;

    /* Warning */
    --color-warning-50: #fff4e6;
    --color-warning-100: #ffe8cc;
    --color-warning-200: #ffd8a8;
    --color-warning-300: #ffc078;
    --color-warning-400: #ffa94d;
    --color-warning-500: #ff922b;
    --color-warning-600: #fd7e14;
    --color-warning-700: #f76707;
    --color-warning-800: #e8590c;
    --color-warning-900: #d9480f;

    /* Error / Danger */
    --color-error-50: #fff5f5;
    --color-error-100: #ffe3e3;
    --color-error-200: #ffc9c9;
    --color-error-300: #ffa8a8;
    --color-error-400: #ff8787;
    --color-error-500: #ff6b6b;
    --color-error-600: #fa5252;
    --color-error-700: #f03e3e;
    --color-error-800: #e03131;
    --color-error-900: #c92a2a;

    /* Neutral — Grays */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #868e96;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    /* ============================================
       SEMANTIC COLORS
       ============================================ */

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    --bg-inverse: var(--color-gray-900);
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-input: #ffffff;
    --bg-input-focus: #ffffff;
    --bg-code: var(--color-gray-100);
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: var(--color-gray-50);

    /* Text */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-700);
    --text-tertiary: var(--color-gray-600);
    --text-muted: var(--color-gray-500);
    --text-inverse: #ffffff;
    --text-link: var(--color-primary-600);
    --text-link-hover: var(--color-primary-700);
    --text-on-primary: #ffffff;
    --text-on-accent: var(--color-gray-900);

    /* Borders */
    --border-default: var(--color-gray-200);
    --border-light: var(--color-gray-100);
    --border-strong: var(--color-gray-300);
    --border-focus: var(--color-primary-500);
    --border-error: var(--color-error-500);
    --border-success: var(--color-success-500);

    /* Interactive */
    --interactive-primary: var(--color-primary-600);
    --interactive-primary-hover: var(--color-primary-700);
    --interactive-primary-active: var(--color-primary-800);
    --interactive-secondary: var(--color-gray-100);
    --interactive-secondary-hover: var(--color-gray-200);
    --interactive-danger: var(--color-error-600);
    --interactive-danger-hover: var(--color-error-700);

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    /* Font Families */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes — Fluid Typography */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --text-xl: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --text-2xl: clamp(1.3rem, 1.1rem + 1vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);
    --text-4xl: clamp(1.8rem, 1.4rem + 2vw, 2.25rem);
    --text-5xl: clamp(2.2rem, 1.6rem + 3vw, 3rem);
    --text-6xl: clamp(2.8rem, 1.8rem + 4vw, 3.75rem);
    --text-7xl: clamp(3.2rem, 2rem + 5vw, 4.5rem);

    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ============================================
       SPACING
       ============================================ */

    --space-0: 0;
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    --space-40: 10rem;     /* 160px */
    --space-48: 12rem;     /* 192px */

    /* Section Spacing */
    --section-padding-y: clamp(3rem, 5vw, 6rem);
    --section-padding-x: clamp(1rem, 3vw, 2rem);

    /* ============================================
       LAYOUT
       ============================================ */

    --container-xs: 20rem;     /* 320px */
    --container-sm: 30rem;     /* 480px */
    --container-md: 45rem;     /* 720px */
    --container-lg: 60rem;     /* 960px */
    --container-xl: 75rem;     /* 1200px */
    --container-2xl: 87.5rem;  /* 1400px */
    --container-full: 100%;

    --sidebar-width: 16rem;    /* 256px */
    --sidebar-collapsed-width: 4rem; /* 64px */
    --header-height: 4rem;     /* 64px */

    /* ============================================
       BORDERS & RADIUS
       ============================================ */

    --radius-none: 0;
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-2xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;
    --border-width: 1px;
    --border-width-2: 2px;

    /* ============================================
       SHADOWS
       ============================================ */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px 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);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 3px rgba(92, 124, 250, 0.3);
    --shadow-error-focus: 0 0 0 3px rgba(250, 82, 82, 0.3);

    /* Elevated shadow for cards */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

    /* ============================================
       TRANSITIONS & MOTION
       ============================================ */

    /* Durations */
    --duration-instant: 0ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-moderate: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    --duration-slowest: 1000ms;

    /* Easings */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Standard transitions */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-out);
    --transition-moderate: all var(--duration-moderate) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
    --transition-color: color var(--duration-normal) var(--ease-out), 
                        background-color var(--duration-normal) var(--ease-out), 
                        border-color var(--duration-normal) var(--ease-out);
    --transition-transform: transform var(--duration-moderate) var(--ease-out);
    --transition-shadow: box-shadow var(--duration-moderate) var(--ease-out);
    --transition-opacity: opacity var(--duration-moderate) var(--ease-out);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */

    --z-below: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-header: 30;
    --z-sidebar: 35;
    --z-overlay: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-toast: 70;
    --z-tooltip: 80;
    --z-max: 9999;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0f1117;
    --bg-secondary: #161820;
    --bg-tertiary: #1c1e28;
    --bg-inverse: #f8f9fa;
    --bg-elevated: #1c1e28;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-glass: rgba(15, 17, 23, 0.85);
    --bg-input: #1c1e28;
    --bg-input-focus: #22242e;
    --bg-code: #1c1e28;
    --bg-sidebar: #161820;
    --bg-card: #1c1e28;
    --bg-card-hover: #22242e;

    /* Text */
    --text-primary: #e9ecef;
    --text-secondary: #ced4da;
    --text-tertiary: #adb5bd;
    --text-muted: #868e96;
    --text-inverse: #0f1117;
    --text-link: var(--color-primary-400);
    --text-link-hover: var(--color-primary-300);

    /* Borders */
    --border-default: #2c2e38;
    --border-light: #22242e;
    --border-strong: #3c3e48;

    /* Interactive */
    --interactive-primary: var(--color-primary-500);
    --interactive-primary-hover: var(--color-primary-400);
    --interactive-primary-active: var(--color-primary-600);
    --interactive-secondary: #22242e;
    --interactive-secondary-hover: #2c2e38;

    /* Shadows — softer in dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-focus: 0 0 0 3px rgba(92, 124, 250, 0.4);
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-moderate: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --duration-slowest: 0ms;
    }
}