/* ─────────────────────────────────────────────────────────────
   COCO Design System — Colors & Type Tokens
   Source of truth: Website/CLAUDE.md §3 + app/*.html :root vars
   ───────────────────────────────────────────────────────────── */

/* ── Brand font: Figtree (self-hosted variable font, wght 300–900) ── */
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 900; font-style: italic; font-display: swap;
}

:root {
  /* ── Surfaces & background ── */
  --bg:           #fdf8f0;   /* warm cream — page background */
  --surface:      #ffffff;   /* default card / panel */
  --surface-2:    #fbf4e9;   /* warm secondary surface */
  --border:       #e5d0b0;   /* sandy hairline */
  --border-soft:  rgba(229, 208, 176, 0.6);

  /* ── Text ── */
  --text:         #1e1408;   /* near-black, slightly warm */
  --text-muted:   #7a5f40;   /* warm muted brown */
  --text-inverse: #ffffff;

  /* ── Brand: green (primary, "confirmed/structured") ── */
  --green:        #2d7a4f;
  --green-light:  #e8f2ec;
  --green-muted:  rgba(45, 122, 79, 0.12);
  --green-dark:   #245f3e;

  /* ── Brand: petrol (secondary, software/enterprise CTA) ── */
  --petrol:       #2f6f73;
  --petrol-light: #e7f0f0;
  --petrol-dark:  #275f62;

  /* ── Brand: terracotta (editorial accent, problem framing) ── */
  --terracotta:       #c47a5c;
  --terracotta-light: #f4e5df;
  --terracotta-dark:  #b76f54;

  /* ── Brand: olive (soft process accents) ── */
  --olive:        #7a8b5a;
  --olive-light:  #eef1e6;

  /* ── Brand: sand (attention / pending state) ── */
  --sand:         #f2cc7c;
  --sand-dark:    #b87333;
  --sand-amber:   #9c7a4b;        /* used in app for "estimated" lane */
  --sand-warm:    #fbf4e9;        /* alias of surface-2 */

  /* ── Status: error / destructive ── */
  --red:          #a8312e;
  --red-light:    #f7ebea;

  /* ── Status: amber (review-pending in app) ── */
  --amber:        #d97706;
  --amber-light:  #fffbeb;

  /* ── Radius ── */
  --radius-card:  16px;
  --radius-input: 10px;
  --radius-pill:  100px;
  --radius-chip:  8px;

  /* ── Shadows ── */
  --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-hover:   0 6px 24px rgba(0, 0, 0, 0.10);
  --shadow-card-lg: 0 1px 3px rgba(0, 0, 0, 0.05), 0 12px 30px rgba(0, 0, 0, 0.03);

  /* ── Spacing scale ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  5rem;      /* 80px */

  /* ── Typography: family ── */
  --font-sans: 'Figtree', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ── Typography: weights ──
     Figtree ships 300–900. We promote display weight to 900 (Black) for
     hero headlines; 800 (ExtraBold) is still used as the H1/H2 ceiling. */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;
  --weight-display:  900;

  /* ── Typography: scale (named, semantic) ── */
  --text-display:  clamp(2rem, 4vw, 3rem);     /* hero headlines */
  --text-h1:       clamp(1.6rem, 3vw, 2.25rem);
  --text-h2:       1.375rem;
  --text-h3:       1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.9375rem;
  --text-small:    0.875rem;
  --text-caption:  0.8125rem;
  --text-micro:    0.75rem;
  --text-label:    0.6875rem;   /* uppercase micro labels */

  /* ── Typography: line height ── */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* ── Layout ── */
  --container-max: 1152px;
  --sidebar-w:     260px;

  /* ── Motion ── */
  --t-fast: 120ms ease;   /* @kind other */
  --t:      150ms ease;   /* @kind other */
}

/* ─────────────────────────────────────────────────────────────
   Semantic typographic styles
   Use these classes to apply COCO type voice consistently.
   ───────────────────────────────────────────────────────────── */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text);
  background: var(--bg);
}

.t-display {
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--text);
}

.t-h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--text);
}

.t-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text);
}

.t-h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--text);
}

.t-body {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.t-body-muted {
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.t-small {
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--text);
}

.t-caption {
  font-size: var(--text-caption);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.t-label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.t-tabular {
  font-variant-numeric: tabular-nums;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--text-muted);
  word-break: break-all;
}