/* Design tokens - single source of truth for color, spacing, typography,
   radius, borders, shadows, containers and z-index.

   Breakpoints (media queries cannot reference custom properties):
     sm: 420px   md: 768px   lg: 1200px
*/

:root {
    /* ========================================
       COLOR - status palettes (200 = muted fill, 500 = base, 800 = text)
       ======================================== */
    --error-200: oklch(0.51 0.23 360);
    --error-500: oklch(0.74 0.23 360);
    --error-800: oklch(0.89 0.08 360);
    --warning-200: oklch(0.51 0.15 50);
    --warning-500: oklch(0.73 0.22 50);
    --warning-800: oklch(0.88 0.09 50);
    --success-200: oklch(0.48 0.15 160);
    --success-500: oklch(0.68 0.21 160);
    --success-800: oklch(0.84 0.26 160);
    --design-200: oklch(0.48 0.12 180);
    --design-500: oklch(0.69 0.17 180);
    --design-800: oklch(0.85 0.21 180);
    --premium-200: oklch(0.498433 0.114063 90);
    --premium-500: oklch(0.714062 0.165625 90);
    --premium-800: oklch(0.881506 0.203125 90);
    --text-200: oklch(0.48 0 0);
    --text-500: oklch(0.69 0 0);
    --text-800: oklch(0.988 0 0); /* #FBFBFB */

    /* Semantic aliases */
    --accent: var(--design-500);
    --accent-dark: var(--design-800);
    --accent-light: var(--design-200);
    --text-primary: var(--text-800);
    --text-secondary: var(--text-500);
    --text-muted: var(--text-200);
    --bg: #1c1c1e;
    --bg-alt: #232326;
    --border: oklch(0.43 0 0);
    --border-light: oklch(0.32 0 0);

    /* Text rendered on accent / status backgrounds */
    --text-inverse: #fff;

    /* Status surfaces */
    --error-bg: var(--error-200);
    --error-text: var(--error-800);
    --error-border: var(--error-500);
    --success-bg: var(--success-200);
    --success-text: var(--success-800);
    --success-border: var(--success-500);
    --warning-bg: var(--warning-200);
    --warning-text: var(--warning-800);
    --warning-border: var(--warning-500);

    /* Overlays & shadows */
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);

    /* ========================================
       SPACING - uniform 4px grid (space-0 … space-48)
       ======================================== */
    --space-0: 0px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;
    --space-48: 192px;

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-sans:
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", sans-serif;
    --font-pixel: "8bitoperator JVE", "8bitoperator-fallback", monospace;
    --font-mono:
        ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Modular scale (1.25 from a 16px base) */
    --font-size-2xs: 0.625rem; /* 10px */
    --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.75rem; /* 28px */
    --font-size-4xl: 2rem; /* 32px */
    --font-size-5xl: 2.5rem; /* 40px */

    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 2;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-wide: 0.05em;

    /* Comfortable prose measure (50-70 characters per line) */
    --text-measure: 65ch;

    /* Relative gap between an inline icon and its label */
    --icon-gap: 0.6em;

    /* ========================================
       RADIUS
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ========================================
       BORDERS
       ======================================== */
    --border-width-thin: 1px;
    --border-width: 2px;
    --border-width-accent: 4px;

    /* ========================================
       CONTAINERS
       ======================================== */
    --container-lg: 1078px;
    --container-xl: 1078px;
    --container-narrow: 720px;

    /* ========================================
       Z-INDEX
       ======================================== */
    --z-nav: 200;
    --z-bottom-nav: 210;
    --z-skip-link: 250;
    --z-toast: 1000;

    /* ========================================
       COMPONENT DIMENSIONS
       ======================================== */
    --bottom-nav-height: 72px;
}