/* freelAIncer — design tokens
 *
 * Canonical palette, type, spacing, motion, and accessibility primitives.
 * WCAG 2.2 AA contrast ratios documented per token.
 * See docs/design/AUDIT.md for design rationale.
 *
 * Contrast ratios measured against --color-paper (#fafaf7) unless noted.
 * ✅ = passes WCAG 2.2 AA for that use; ✗ = fails.
 */

:root {
  /* ─────────────────────────────────────────────────────────────────────
     TIER 1 · PRIMITIVES (lifted from ZBOS) — DO NOT reference in app code.
     Raw numeric ramp. No semantic meaning, no WCAG guarantee on its own.
     Only the semantic layer below may alias onto these. App/component code
     must use the semantic tokens (--color-*, --border-*, --focus-ring-*).
     ───────────────────────────────────────────────────────────────────── */
  --white: #ffffff;
  --black: #000000;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-900: #7f1d1d;

  /* ───────────────────────────────── PALETTE ─────────────────────────────── */
  /* TIER 2 · SEMANTIC / BRAND LAYER (canonical). App code references this tier. */

  /* Neutrals */
  --color-ink:        #1a1a1a;   /* primary text           — 16.2:1 vs paper — Text ✅ UI ✅ */
  --color-paper:      #fafaf7;   /* primary surface        — baseline */
  --color-graphite:   #4a4a48;   /* secondary text         — 6.8:1  vs paper — Text ✅ UI ✅ */
  --color-dim:        #767674;   /* tertiary text, labels  — 4.0:1  vs paper — UI ✅  Large ✅ Body ✗ */
  --color-muted:      #9a9a97;   /* placeholder, disabled  — 2.6:1  vs paper — Decorative only */
  --color-bone:       #ececea;   /* secondary surface      — 1.1:1  vs paper — Surface/border */

  /* Accents — fill/border safe on light. Text-safe variants below. */
  --color-saffron:      #c48a00; /* go, primary action     — 3.4:1  vs paper — UI ✅  Fill ✅ Text ✗ */
  --color-saffron-deep: #8a6100; /* text-safe saffron      — 5.6:1  vs paper — Text ✅ UI ✅ */
  --color-ember:        #b33424; /* stop, danger, overdue  — 5.3:1  vs paper — Text ✅ UI ✅ */
  --color-olive:        #5a6228; /* success, info, paid    — 5.4:1  vs paper — Text ✅ UI ✅ */
  --color-brass:        #8a7030; /* pending, premium       — 3.6:1  vs paper — UI ✅  Large ✅ Text ✗ */
  --color-brass-deep:   #6b5624; /* text-safe brass        — 5.8:1  vs paper — Text ✅ UI ✅ */

  /* Ikigai regions — pill colours. Always paired with a text label. */
  --color-iki-love:  #b5445a;    /* what you love          — 5.0:1  vs paper — Text ✅ UI ✅ */
  --color-iki-good:  #c48a00;    /* what you're good at    — 3.4:1  vs paper — UI ✅  Text ✗ (use --saffron-deep for text) */
  --color-iki-need:  #267062;    /* what the world needs   — 5.2:1  vs paper — Text ✅ UI ✅ */
  --color-iki-paid:  #5a6228;    /* what you're paid for   — 5.4:1  vs paper — Text ✅ UI ✅ (= olive) */

  /* Accent fills — 15% opacity tints for pill/badge backgrounds */
  --fill-saffron:   #c48a0026;
  --fill-ember:     #b3342426;
  --fill-olive:     #5a622826;
  --fill-brass:     #8a703026;
  --fill-iki-love:  #b5445a26;
  --fill-iki-need:  #26706226;

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

  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* Type scale */
  --type-xs:   0.75rem;    /* 12px — pills, badges, mono labels */
  --type-sm:   0.875rem;   /* 14px — secondary body, form labels */
  --type-base: 1rem;       /* 16px — body text */
  --type-md:   1.125rem;   /* 18px — lead paragraphs */
  --type-lg:   1.375rem;   /* 22px — card titles, H3 */
  --type-xl:   1.75rem;    /* 28px — section headings, H2 */
  --type-2xl:  2.5rem;     /* 40px — hero subhead */
  --type-3xl:  clamp(2.5rem, 5vw, 3.5rem); /* 40–56px — hero headline */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  /* ───────────────────────────────── SPACING ─────────────────────────────── */

  --space-1: 0.25rem;  /* 4px  — tight gaps, icon padding */
  --space-2: 0.5rem;   /* 8px  — default gap, grid gutters */
  --space-3: 0.75rem;  /* 12px — card padding, form field gaps */
  --space-4: 1rem;     /* 16px — section inner padding */
  --space-5: 1.5rem;   /* 24px — between cards/groups */
  --space-6: 2rem;     /* 32px — section outer padding */
  --space-7: 3rem;     /* 48px — major section breaks */
  --space-8: 4rem;     /* 64px — page-level breathing room */

  /* ───────────────────────────────── RADII ───────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ───────────────────────────────── CONTAINERS ──────────────────────────── */

  --wrap:        880px;
  --wrap-narrow: 760px;
  --wrap-wide:   1200px;

  /* ───────────────────────────────── BORDERS ─────────────────────────────── */
  /* ZBOS structural names (verbatim) so lifted components resolve unmodified;
     values map onto our neutral ramp, NOT ZBOS greys. Dark mode cascades via
     the aliased semantic tokens — no hardcoded dark hexes here. */
  --border-subtle:  var(--color-bone);     /* hairlines, card edges */
  --border-default: var(--color-muted);    /* inputs, default dividers */
  --border-strong:  var(--color-graphite); /* emphasis, focus-adjacent */

  /* ───────────────────────────────── FOCUS + MOTION ──────────────────────── */

  /* ZBOS structural names (verbatim), freelAIncer canonical values. */
  --focus-ring-color:  var(--color-saffron); /* NOT a ZBOS default */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  /* Back-compat aliases — Phase 0.5 wireframes + tokens.md reference these. */
  --focus-ring:   var(--focus-ring-width) solid var(--focus-ring-color);
  --focus-offset: var(--focus-ring-offset);

  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-fast: 120ms var(--ease);
  --motion-slow: 280ms var(--ease);

  /* ───────────────────────────────── STATUS GLYPHS ──────────────────────── */
  /* Never colour-only. Pair glyph + colour for all status indicators. */
  /* ● active/in-progress  ⚠ warning/overdue  ▲ positive/up  ▼ negative/down */

  /* ───────────────────────────────── RAINBOW BAR ─────────────────────────── */

  --bar-gradient: linear-gradient(
    90deg,
    var(--color-saffron) 0%,
    var(--color-ember) 35%,
    var(--color-olive) 70%,
    var(--color-brass) 100%
  );
}

/* ─────────────────────────────────── DARK MODE ──────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals invert */
    --color-ink:      #fafaf7;   /* light text on dark     — 16.2:1 vs dark paper */
    --color-paper:    #15140f;   /* dark surface */
    --color-graphite: #cccac4;   /* secondary text         — 11.8:1 vs dark paper */
    --color-dim:      #9a9a97;   /* tertiary text          — 6.2:1  vs dark paper */
    --color-muted:    #666664;   /* placeholder            — 3.2:1  vs dark paper */
    --color-bone:     #2a2820;   /* secondary surface */

    /* Accents — all text-safe on dark surfaces */
    /* saffron #c48a00: 4.8:1 vs #15140f — Text ✅ UI ✅ */
    /* ember   #b33424: 3.3:1 vs #15140f — UI ✅  Large ✅ Body ✗ */
    --color-ember: #d94a38;      /* brightened for dark     — 4.6:1  vs dark paper — Text ✅ UI ✅ */
    /* olive   #5a6228: 3.0:1 vs #15140f — UI ✅  Text ✗ */
    --color-olive: #7a8538;      /* brightened for dark     — 4.5:1  vs dark paper — Text ✅ UI ✅ */
    /* brass   #8a7030: 4.0:1 vs #15140f — UI ✅  Large ✅ */

    /* Deep variants not needed on dark — base accents are text-safe */
    --color-saffron-deep: var(--color-saffron);
    --color-brass-deep:   var(--color-brass);

    /* Ikigai — brighten for dark readability */
    --color-iki-love: #d4637a;   /* 5.4:1 vs dark paper */
    --color-iki-need: #3a9b89;   /* 5.0:1 vs dark paper */
    --color-iki-good: var(--color-saffron);
    --color-iki-paid: var(--color-olive);

    /* Fills — 20% opacity on dark for visibility */
    --fill-saffron:   #c48a0033;
    --fill-ember:     #d94a3833;
    --fill-olive:     #7a853833;
    --fill-brass:     #8a703033;
    --fill-iki-love:  #d4637a33;
    --fill-iki-need:  #3a9b8933;
  }
}

/* ─────────────────────────────── FORCED COLORS ──────────────────────────── */

@media (forced-colors: active) {
  :root {
    --color-ink:      CanvasText;
    --color-paper:    Canvas;
    --color-saffron:  Highlight;
    --color-ember:    LinkText;
    --focus-ring:     2px solid Highlight;
  }
}

/* ─────────────────────────────── REDUCED MOTION ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-slow: 0ms;
  }
}

/* ─────────────────────────────── GLOBAL FOCUS ───────────────────────────── */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ─────────────────────────────── ACCESSIBILITY ──────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}