/**
 * AFROTOOLS DESIGN TOKENS
 * =====================================================================
 * The single source of truth for every visual decision.
 * Change a token here -> it updates across ALL pages.
 *
 * RULES:
 * 1. Never hardcode a colour in any page CSS. Always use tokens.
 * 2. Never hardcode a font name in page CSS. Always use tokens.
 * 3. Never hardcode spacing values. Use the scale.
 * 4. This file loads first, before any other stylesheet.
 *
 * NOTE: This file is kept for backward compatibility with 250+ pages.
 * New pages should import /assets/css/design-system.css instead,
 * which contains these same tokens plus utilities and components.
 * =====================================================================
 */

/* ── PRIMITIVE COLOUR PALETTE ─────────────────────────────── */
:root {
  /* Blue scale — AfroTools brand is BLUE */
  --_blue-900: #001D4D;
  --_blue-800: #003580;
  --_blue-700: #0063D1;
  --_blue-600: #007AFF;   /* AfroTools primary blue */
  --_blue-500: #4DA3FF;
  --_blue-400: #80BFFF;
  --_blue-300: #007AFF;
  --_blue-200: #80BFFF;
  --_blue-100: #CCE4FF;
  --_blue-50:  #E8F2FF;

  /* Dark scale */
  --_dark-900: #020A14;
  --_dark-800: #0A1628;   /* primary dark bg */
  --_dark-700: #111D30;
  --_dark-600: #1E2D40;
  --_dark-500: #2A3D55;

  /* Neutral scale */
  --_neutral-800: #0f172a;
  --_neutral-600: #64748b;
  --_neutral-400: #94a3af;
  --_neutral-300: #94A3B8;
  --_neutral-200: #e2e8f0;
  --_neutral-100: #f3f4f6;
  --_neutral-50:  #F8FAFD;
  --_neutral-0:   #ffffff;

  /* Accent — Gold */
  --_gold-600: #d48a00;
  --_gold-500: #F5A623;
  --_gold-400: #ffbc4a;
  --_gold-100: #fff3cd;

  /* Semantic — functional use */
  --_red-500: #ef4444;
  --_red-100: rgba(239, 68, 68, 0.08);
  --_info-blue: #3b82f6;

  /* ── SEMANTIC COLOUR TOKENS ─────────────────────────────── */

  /* Brand — primary is blue */
  --color-brand:          var(--_blue-600);
  --color-brand-dark:     var(--_blue-700);
  --color-brand-light:    var(--_blue-500);
  --color-brand-pale:     var(--_blue-50);
  --color-brand-subtle:   rgba(0, 122, 255, 0.15);

  /* Design system aliases */
  --color-primary:        var(--_blue-600);
  --color-primary-dark:   var(--_blue-700);
  --color-primary-light:  var(--_blue-500);
  --color-primary-pale:   rgba(0, 122, 255, 0.08);
  --color-primary-rgb:    0, 122, 255;
  --color-secondary:      var(--_blue-700);
  --color-secondary-rgb:  0, 99, 209;

  /* Background */
  --color-bg:             #F8FAFD;
  --color-bg-subtle:      #F1F5F9;
  --color-bg-dark:        #0A1628;
  --color-bg-dark-alt:    #111D30;
  --color-bg-card:        #ffffff;

  /* Text */
  --color-text:           var(--_neutral-800);
  --color-text-muted:     var(--_neutral-600);
  --color-text-subtle:    var(--_neutral-400);
  --color-text-inverse:   var(--_neutral-0);

  /* Border */
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;
  --color-border-subtle:  #f1f5f9;

  /* Accent */
  --color-gold:           var(--_gold-500);
  --color-gold-pale:      var(--_gold-100);
  --color-gold-rgb:       245, 166, 35;

  /* Status */
  --color-error:          var(--_red-500);
  --color-error-pale:     var(--_red-100);
  --color-success:        #3B82F6;
  --color-success-pale:   rgba(59, 130, 246, 0.08);
  --color-warning:        #f59e0b;
  --color-warning-pale:   rgba(245, 158, 11, 0.08);
  --color-info:           #3b82f6;
  --color-info-pale:      rgba(59, 130, 246, 0.08);

  /* On-dark surfaces */
  --color-ondark-primary:   var(--_blue-500);
  --color-ondark-secondary: rgba(255,255,255,0.6);
  --color-ondark-muted:     rgba(255,255,255,0.35);
  --color-ondark-border:    rgba(255,255,255,0.1);

  /* ── TYPOGRAPHY TOKENS ──────────────────────────────────── */

  /* Font families */
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes — modular scale (1.25 ratio) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1rem;       /* 16px — alias */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Display sizes */
  --display-sm:  1.75rem;
  --display-md:  2.25rem;
  --display-lg:  3rem;
  --display-xl:  4rem;

  /* Font weights */
  --weight-light:   400;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.15em;

  /* ── SPACING SCALE ──────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Numeric aliases */
  --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;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── LAYOUT TOKENS ──────────────────────────────────────── */
  --max-width:         1200px;
  --max-width-content: 1200px;
  --max-width-narrow:  800px;
  --max-width-wide:    1400px;
  --max-width-tool:    1100px;
  --nav-height: 62px;

  /* ── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;
  --radius-round: 50%;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg:    0 10px 25px -3px rgba(0,0,0,0.1);
  --shadow-xl:    0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-brand: 0 4px 20px rgba(0,122,255,0.2);

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:       cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── Z-INDEX SCALE ──────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-overlay:  100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ── DARK MODE OVERRIDES ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0B1120;
    --color-bg-subtle:    #131D2E;
    --color-bg-card:      #131D2E;
    --color-text:         #E2E8F0;
    --color-text-muted:   #8B9CB8;
    --color-text-subtle:  #5A6F8A;
    --color-border:       #1E2D40;
    --color-border-strong: #2A3D55;
    --color-border-subtle: #162236;
  }
}