/* =========================================================
   Hairun Trading — Design Tokens
   Source: docs/design-tokens.md
   Version: 1.0.0
   ========================================================= */

:root {
  /* ---- Colour: Brand -------------------------------- */
  --hairun-color-brand-dark:        #0A0E14;
  --hairun-color-brand-deep:        #0B132B;
  --hairun-color-brand-gold:        #C9A961;
  --hairun-color-brand-gold-bright: #D4AF37;
  --hairun-color-brand-blue:        #1E3A8A;
  --hairun-color-brand-warm-white:  #FAF7F2;

  /* ---- Colour: Neutral ------------------------------ */
  --hairun-color-neutral-50:  #FAF7F2;
  --hairun-color-neutral-100: #F2EDE3;
  --hairun-color-neutral-200: #E5DED0;
  --hairun-color-neutral-300: #C9C0AF;
  --hairun-color-neutral-400: #8E8775;
  --hairun-color-neutral-500: #6B6452;
  --hairun-color-neutral-600: #4A4538;
  --hairun-color-neutral-700: #2C2A22;
  --hairun-color-neutral-800: #1A1A14;
  --hairun-color-neutral-900: #0A0E14;

  /* ---- Colour: Semantic ----------------------------- */
  --hairun-color-success: #2E7D5A;
  --hairun-color-warning: #B45309;
  --hairun-color-danger:  #B91C1C;
  --hairun-color-info:    #1E40AF;

  /* ---- Typography: Family ---------------------------- */
  --hairun-font-family-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-family-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-family-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Typography: Sizes (modular ratio 1.250) ------ */
  --hairun-font-display-2xl: 700 4.768rem/1.05 "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-display-xl:  700 3.815rem/1.05 "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-display-lg:  700 3.052rem/1.10 "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-display-md:  600 2.441rem/1.15 "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-display-sm:  600 1.953rem/1.20 "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-body-lg:     400 1.25rem/1.60 "Inter", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-body-md:     400 1rem/1.65 "Inter", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-body-sm:     400 0.875rem/1.55 "Inter", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-body-xs:     500 0.75rem/1.50 "Inter", "Helvetica Neue", Arial, sans-serif;
  --hairun-font-mono-sm:     400 0.875rem/1.50 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --hairun-letter-spacing-tight: -0.02em;
  --hairun-letter-spacing-snug:  -0.015em;
  --hairun-letter-spacing-base:  0;
  --hairun-letter-spacing-wide:  0.02em;
  --hairun-letter-spacing-eyebrow: 0.18em;

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

  /* ---- Container widths ------------------------------ */
  --hairun-container-sm:  720px;
  --hairun-container-md:  960px;
  --hairun-container-lg: 1200px;
  --hairun-container-xl: 1440px;
  --hairun-container-2xl:1680px;

  /* ---- Radius ---------------------------------------- */
  --hairun-radius-0:    0;
  --hairun-radius-4:    4px;
  --hairun-radius-8:    8px;
  --hairun-radius-12:  12px;
  --hairun-radius-16:  16px;
  --hairun-radius-24:  24px;
  --hairun-radius-full:9999px;

  /* ---- Shadow ---------------------------------------- */
  --hairun-shadow-sm: 0 1px 2px rgba(10,14,20,.08);
  --hairun-shadow-md: 0 4px 8px rgba(10,14,20,.10), 0 2px 4px rgba(10,14,20,.06);
  --hairun-shadow-lg: 0 12px 24px rgba(10,14,20,.12), 0 4px 8px rgba(10,14,20,.08);
  --hairun-shadow-xl: 0 24px 48px rgba(10,14,20,.16), 0 8px 16px rgba(10,14,20,.10);
  --hairun-shadow-2xl:0 48px 96px rgba(10,14,20,.20), 0 16px 32px rgba(10,14,20,.12);

  /* ---- Motion: Durations ----------------------------- */
  --hairun-duration-instant: 100ms;
  --hairun-duration-fast:    200ms;
  --hairun-duration-base:    300ms;
  --hairun-duration-slow:    500ms;
  --hairun-duration-cinematic:800ms;

  /* ---- Motion: Easings ------------------------------- */
  --hairun-ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --hairun-ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --hairun-ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
  --hairun-ease-magnetic:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Breakpoints (px values, em reference 16 root) */
  --hairun-bp-sm:  480px;
  --hairun-bp-md:  768px;
  --hairun-bp-lg: 1024px;
  --hairun-bp-xl: 1280px;
  --hairun-bp-2xl:1536px;

  /* ---- Z-index --------------------------------------- */
  --hairun-z-hide:    -1;
  --hairun-z-base:     0;
  --hairun-z-raised:  10;
  --hairun-z-sticky: 100;
  --hairun-z-overlay:500;
  --hairun-z-modal:  1000;
  --hairun-z-toast: 1500;
  --hairun-z-skiplink:9999;

  /* ---- Icon sizes ------------------------------------ */
  --hairun-icon-16:16px;
  --hairun-icon-20:20px;
  --hairun-icon-24:24px;
  --hairun-icon-32:32px;

  /* ---- Layout helpers -------------------------------- */
  --hairun-header-height: 72px;
  --hairun-section-padding: clamp(var(--hairun-space-48), 8vw, var(--hairun-space-96));
}

/* ---- Dark mode override (system preference) -------- */
@media (prefers-color-scheme: dark) {
  :root {
    --hairun-color-brand-dark:       #FAF7F2;
    --hairun-color-brand-deep:       #0B132B;
    --hairun-color-brand-gold:       #D4AF37;
    --hairun-color-brand-gold-bright:#E8C766;
    --hairun-color-brand-blue:       #2E55B0;
    --hairun-color-brand-warm-white: #0A0E14;

    --hairun-color-neutral-50:  #0B132B;
    --hairun-color-neutral-100: #14213A;
    --hairun-color-neutral-200: #1E2C48;
    --hairun-color-neutral-300: #2C3D5E;
    --hairun-color-neutral-400: #6B7896;
    --hairun-color-neutral-500: #97A3BC;
    --hairun-color-neutral-600: #C5CDE0;
    --hairun-color-neutral-700: #DDE3F0;
    --hairun-color-neutral-800: #EBEFF7;
    --hairun-color-neutral-900: #FAF7F2;

    --hairun-shadow-sm: 0 1px 2px rgba(0,0,0,.24);
    --hairun-shadow-md: 0 4px 8px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.18);
    --hairun-shadow-lg: 0 12px 24px rgba(0,0,0,.34), 0 4px 8px rgba(0,0,0,.22);
    --hairun-shadow-xl: 0 24px 48px rgba(0,0,0,.40), 0 8px 16px rgba(0,0,0,.28);
    --hairun-shadow-2xl:0 48px 96px rgba(0,0,0,.48), 0 16px 32px rgba(0,0,0,.34);
  }
}

/* ---- Manual dark mode toggle (optional) ------------- */
:root[data-theme="dark"] {
  --hairun-color-brand-dark:       #FAF7F2;
  --hairun-color-brand-warm-white: #0A0E14;
  --hairun-color-brand-gold:       #D4AF37;
  --hairun-color-brand-gold-bright:#E8C766;
  --hairun-color-brand-blue:       #2E55B0;
  --hairun-color-neutral-50:  #0B132B;
  --hairun-color-neutral-900: #FAF7F2;
}