/**
 * Design tokens - The Drake Dossier
 * Semantic tokens only. Components must reference these variables - never raw hex.
 * Source: Frontend Design Specification + Design Language & Component Library.
 */

:root {
    /* -------------------------------------------------------------------------
       Color - primitives (referenced only by semantic tokens below)
       ------------------------------------------------------------------------- */
    --palette-navy-950: #071423;
    --palette-navy-900: #0e1d2f;
    --palette-navy-800: #15263b;
    --palette-blue-500: #2d8cff;
    --palette-blue-400: #5cb8ff;
    --palette-white: #ffffff;
    --palette-gray-100: #e8eef6;
    --palette-gray-300: #a8b3c4;
    --palette-gray-500: #7a8799;
    --palette-success: #39d98a;
    --palette-warning: #f5a524;
    --palette-danger: #e85d5d;

    /* -------------------------------------------------------------------------
       Color - semantic (use these in components)
       ------------------------------------------------------------------------- */
    --color-background: var(--palette-navy-950);
    --color-surface: var(--palette-navy-900);
    --color-card: var(--palette-navy-800);
    --color-border: rgba(45, 140, 255, 0.22);
    --color-border-strong: rgba(45, 140, 255, 0.4);
    --color-primary: var(--palette-blue-500);
    --color-secondary: var(--palette-blue-400);
    --color-text: var(--palette-white);
    --color-muted: var(--palette-gray-300);
    --color-muted-strong: var(--palette-gray-500);
    --color-success: var(--palette-success);
    --color-warning: var(--palette-warning);
    --color-danger: var(--palette-danger);

    --color-nav-bg: rgba(7, 20, 35, 0.85);
    --color-nav-bg-solid: rgba(7, 20, 35, 0.96);
    --color-focus-ring: rgba(45, 140, 255, 0.55);

    --color-primary-soft: rgba(45, 140, 255, 0.12);
    --color-primary-muted: rgba(45, 140, 255, 0.18);
    --color-primary-glow: rgba(45, 140, 255, 0.35);
    --color-overlay: rgba(0, 0, 0, 0.45);

    --color-success-bg: rgba(57, 217, 138, 0.12);
    --color-success-border: var(--color-success);
    --color-success-text: var(--color-success);
    --color-error-bg: rgba(232, 93, 93, 0.12);
    --color-error-border: var(--color-danger);
    --color-error-text: #f5b4b4;

    /* Legacy semantic aliases (existing page CSS) */
    --color-bg: var(--color-background);
    --color-bg-elevated: var(--color-surface);
    --color-bg-panel: var(--color-card);
    --color-text-muted: var(--color-muted);
    --color-accent: var(--color-primary);

    /* -------------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------------- */
    --font-family-display: 'Space Grotesk', system-ui, sans-serif;
    --font-family-body: 'Inter', system-ui, sans-serif;
    --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-family-base: var(--font-family-body);

    --font-size-caption: 0.8125rem; /* 13px */
    --font-size-small: 0.9375rem;   /* 15px */
    --font-size-body: 1.125rem;     /* 18px */
    --font-size-card-title: 1.5rem; /* 24px */
    --font-size-article: 2rem;      /* 32px */
    --font-size-section: 2.25rem;   /* 36px */
    --font-size-page: 3rem;         /* 48px */
    --font-size-hero: clamp(2.75rem, 5vw, 4.5rem); /* 56–72 */

    /* Scale used by existing page styles */
    --font-size-xs: var(--font-size-caption);
    --font-size-sm: var(--font-size-small);
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 1.875rem;
    --font-size-5xl: var(--font-size-article);
    --font-size-6xl: 2.125rem;
    --font-size-7xl: 2.5rem;
    --font-size-8xl: var(--font-size-section);
    --font-size-9xl: var(--font-size-page);
    --font-size-10xl: var(--font-size-hero);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-body: 1.65;
    --line-height-relaxed: 1.75;
    --line-height-loose: 1.85;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    --letter-spacing-label: 0.08em;

    /* Legacy letter-spacing aliases */
    --letter-spacing-sm: 0.02em;
    --letter-spacing-md: 0.04em;
    --letter-spacing-lg: 0.06em;
    --letter-spacing-xl: 0.08em;
    --letter-spacing-2xl: 0.1em;

    /* -------------------------------------------------------------------------
       Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128)
       ------------------------------------------------------------------------- */
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;   /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */
    --space-9: 6rem;     /* 96 */
    --space-10: 8rem;    /* 128 */

    --space-section-y: var(--space-9);
    --space-section-x: var(--space-5);
    --space-nav-y: var(--space-4);
    --space-nav-link-x: var(--space-5);

    /* -------------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------------- */
    --max-width-form: 36rem;
    --max-width-content: 47.5rem; /* ~760px reading */
    --max-width-wide: 75rem;      /* 1200px */
    --header-height: 4.25rem;
    --grid-gap: var(--space-5);

    /* -------------------------------------------------------------------------
       Borders & radius
       ------------------------------------------------------------------------- */
    --border-width-sm: 1px;
    --border-width-md: 2px;
    --border-width-lg: 3px;
    --border-width-accent: 4px;
    --border-width-panel: 4px;
    --border-dashed: 1px dashed var(--color-border-strong);

    --radius-none: 0;
    --radius-input: 10px;
    --radius-button: 12px;
    --radius-card: 16px;
    --radius-image: 16px;
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
       Shadows (soft; three levels)
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-panel: var(--shadow-md);
    --shadow-panel-hover: var(--shadow-lg);
    --shadow-glow-sm: 0 0 0 3px var(--color-focus-ring);
    --shadow-glow-md: 0 0 24px var(--color-primary-glow);
    --shadow-panel-red: var(--shadow-md);
    --shadow-panel-red-strong: var(--shadow-md);
    --text-shadow-heading: none;
    --text-shadow-hero: none;
    --text-shadow-link-hover: none;

    /* -------------------------------------------------------------------------
       Icons & controls
       ------------------------------------------------------------------------- */
    --size-icon-sm: 1rem;
    --size-icon-md: 1.25rem;
    --size-icon-lg: 1.5rem;
    --size-social-icon: 2.75rem;
    --size-touch: 2.75rem;

    /* -------------------------------------------------------------------------
       Motion
       ------------------------------------------------------------------------- */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 250ms;
    --duration-pulse: 8s;
    --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: ease-in-out;
    --transition-default: color var(--duration-base) var(--ease-default),
        background-color var(--duration-base) var(--ease-default),
        border-color var(--duration-base) var(--ease-default),
        box-shadow var(--duration-base) var(--ease-default),
        transform var(--duration-base) var(--ease-default),
        opacity var(--duration-base) var(--ease-default);
    --transition-width: width var(--duration-base) var(--ease-default);
    --hover-lift: translateY(-2px);
    --hover-lift-card: translateY(-4px);
    --hover-slide: translateY(-2px);

    /* -------------------------------------------------------------------------
       Z-index
       ------------------------------------------------------------------------- */
    --z-nav: 1000;
    --z-nav-menu: 1001;
}