/* =============================================================
   Mikey Design System — Foundations
   Colors, type, spacing, shadows, radii
   ============================================================= */

/* ---------- Web fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* =============== Color primitives (OKLCH) =============== */

  /* Neutrals — warm ivory → deep navy */
  --ivory-50:  oklch(0.995 0.003 85);   /* paper */
  --ivory-100: oklch(0.985 0.005 85);   /* background */
  --ivory-200: oklch(0.97  0.005 85);   /* muted */
  --ivory-300: oklch(0.95  0.005 85);   /* secondary */
  --ivory-400: oklch(0.92  0.006 85);   /* border-soft */
  --ivory-500: oklch(0.85  0.008 85);   /* border */

  --navy-50:  oklch(0.55 0.02 250);     /* muted text */
  --navy-100: oklch(0.45 0.03 250);     /* secondary text */
  --navy-200: oklch(0.35 0.035 250);    /* body emphasis */
  --navy-300: oklch(0.28 0.035 250);    /* sidebar hover */
  --navy-400: oklch(0.25 0.04  250);    /* foreground — deep navy */
  --navy-500: oklch(0.20 0.03  250);    /* sidebar */
  --navy-600: oklch(0.15 0.025 250);    /* deepest */

  /* Brand — antique brass */
  --brass-100: oklch(0.92 0.04 70);
  --brass-200: oklch(0.82 0.06 70);
  --brass-300: oklch(0.72 0.08 70);
  --brass-400: oklch(0.65 0.08 70);   /* primary brass */
  --brass-500: oklch(0.60 0.10 70);   /* ready */
  --brass-600: oklch(0.50 0.09 70);   /* brass-deep */
  --brass-700: oklch(0.42 0.08 70);

  /* Semantic hues */
  --emerald-400: oklch(0.62 0.10 165);
  --emerald-500: oklch(0.55 0.10 165);  /* verified */
  --emerald-600: oklch(0.45 0.10 165);

  --amber-400: oklch(0.75 0.14 70);
  --amber-500: oklch(0.65 0.18 55);    /* review */
  --amber-600: oklch(0.55 0.16 50);

  --red-400: oklch(0.65 0.20 25);
  --red-500: oklch(0.55 0.20 25);      /* blocker */
  --red-600: oklch(0.45 0.18 25);

  /* =============== Semantic color tokens =============== */
  --background: var(--ivory-100);
  --paper:      var(--ivory-50);
  --card:       oklch(0.99 0.005 85);
  --muted:      var(--ivory-200);
  --secondary:  var(--ivory-300);

  --foreground:  var(--navy-400);
  --fg-1:        var(--navy-400);  /* primary text */
  --fg-2:        var(--navy-200);  /* body emphasis */
  --fg-3:        var(--navy-100);  /* secondary */
  --fg-muted:    var(--navy-50);   /* metadata, timestamps */

  --border:      var(--ivory-500);
  --border-soft: var(--ivory-400);
  --border-strong: oklch(0.25 0.04 250 / 0.2);

  --accent:       var(--brass-400);
  --accent-fg:    var(--ivory-50);
  --accent-muted: oklch(0.92 0.04 70 / 0.3);

  /* Sidebar (dark navy) */
  --sidebar:           var(--navy-500);
  --sidebar-fg:        oklch(0.94 0.005 85);
  --sidebar-muted-fg:  oklch(0.75 0.01 85);
  --sidebar-hover:     var(--navy-300);
  --sidebar-active:    var(--navy-600);
  --sidebar-accent:    var(--brass-400);
  --sidebar-border:    oklch(0.30 0.03 250);

  /* Status */
  --status-ready:    var(--brass-500);
  --status-verified: var(--emerald-500);
  --status-review:   var(--amber-500);
  --status-blocker:  var(--red-500);
  --status-exported: var(--navy-50);

  --ready-bg:    oklch(0.60 0.10 70 / 0.08);
  --verified-bg: oklch(0.55 0.10 165 / 0.08);
  --review-bg:   oklch(0.65 0.18 55 / 0.08);
  --blocker-bg:  oklch(0.55 0.20 25 / 0.06);

  /* =============== Typography =============== */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-hero:       clamp(64px, 8vw, 104px);
  --fs-display:    64px;
  --fs-section:    48px;
  --fs-page-title: 32px;
  --fs-card-title: 24px;
  --fs-subhead:    20px;
  --fs-body:       18px;
  --fs-body-sm:    16px;
  --fs-small:      14px;
  --fs-caption:    12px;

  --lh-headline: 1.1;
  --lh-subhead:  1.3;
  --lh-body:     1.6;
  --lh-dense:    1.4;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-caps:  0.1em;

  /* =============== Spacing (4px base) =============== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* =============== Radii =============== */
  /* Conservative — 6px max, 0 for data tables */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 999px;

  /* =============== Shadows =============== */
  --shadow-premium-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-premium-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04);
  --shadow-premium-lg: 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06), 0 16px 32px rgba(0,0,0,0.08);
  --shadow-card:       0 1px 2px rgba(20, 25, 45, 0.04), 0 1px 3px rgba(20, 25, 45, 0.03);
  --shadow-card-hover: 0 2px 4px rgba(20, 25, 45, 0.06), 0 8px 16px rgba(20, 25, 45, 0.06);
  --shadow-selected:   0 0 0 1px var(--fg-1), 0 6px 20px rgba(20, 25, 45, 0.10);
  --shadow-inset:      inset 0 1px 2px rgba(20, 25, 45, 0.06);
  --shadow-focus:      0 0 0 3px oklch(0.65 0.08 70 / 0.25);

  /* =============== Motion =============== */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  260ms;
}

/* =============================================================
   Semantic element styles — use as classes or extend
   ============================================================= */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif   { font-family: var(--font-serif); font-optical-sizing: auto; }
.mono    { font-family: var(--font-mono); }

/* Headlines */
.h-hero {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h-section {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-section);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h-page {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-page-title);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-tight);
}
.h-card {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-card-title);
  line-height: var(--lh-subhead);
}
.h-card-serif {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-card-title);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-tight);
}
.h-subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
}

/* Body, meta */
.p        { font-size: var(--fs-body);    line-height: var(--lh-body); color: var(--fg-2); }
.p-sm     { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-2); }
.meta     { font-size: var(--fs-small);   line-height: var(--lh-dense); color: var(--fg-3); }
.caption  {
  font-size: var(--fs-caption);
  line-height: var(--lh-dense);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-2);
  background: var(--muted);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}