/* ============================================================
   Catemo Design System — colors & type (v4 · Stone · Teal · Coral)
   ----------------------------------------------------------------
   v4 is a palette refresh on top of the original "Civic Clarity"
   structure. Same tokens, same component names, new values:

     • Stone neutrals (cooler, near-white) replace warm cream
     • Tailwind teal-600 (brighter) replaces forest teal
     • Coral / rose replaces warm amber as the brand accent
     • Inter takes over body text; Bricolage Grotesque is now
       reserved for the display scale only

   Fonts are loaded from Google Fonts (same families the live
   codebase loads via @fontsource npm packages).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── SURFACES (Stone family — near-white, slightly warm) ──── */
  --bg: #FAFAF8;             /* app background — Stone-50/Off-white */
  --surface: #FFFFFF;        /* cards, inputs */
  --surface-2: #F5F4F1;      /* sunken/secondary surfaces — Stone-100 */
  --surface-sunk: #EDECE7;   /* pressed / deepest */

  /* ── INK (Stone-900/800/700/500/400) ─────────────────────── */
  --ink: #1C1917;            /* primary text */
  --ink-2: #292524;          /* hover on ink surfaces */
  --ink-3: #44403C;          /* body text on light bg */
  --muted: #78716C;          /* secondary text */
  --muted-2: #A8A29E;        /* tertiary / disabled */

  /* ── PRIMARY: Tailwind teal-600 (saturated, vibrant) ─────── */
  --teal: #0D9488;           /* primary actions, links, brand */
  --teal-2: #0F766E;         /* hover (teal-700) */
  --teal-soft: #CCFBF1;      /* soft fill (teal-100) */

  /* ── ACCENT: CORAL / Rose (NEW — replaces warm amber) ────── */
  --amber: #FB7185;          /* token name kept for compatibility */
  --amber-2: #F43F5E;        /* deeper coral */
  --amber-soft: #FFE4E6;     /* soft pink */

  /* ── LIME (brighter Tailwind-style) ──────────────────────── */
  --lime: #84CC16;
  --lime-soft: #ECFCCB;

  /* ── RUST (kept) ─────────────────────────────────────────── */
  --rust: #C9583E;
  --rust-soft: #FFE4E6;      /* shares the soft-coral; OK */

  /* ── LINES (cool Stone) ──────────────────────────────────── */
  --line: #E7E5E4;
  --line-soft: #F5F5F4;
  --line-strong: #292524;

  /* ── TYPE FAMILIES ───────────────────────────────────────── */
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── RADII ───────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(28,25,23,0.04);
  --shadow-2: 0 2px 8px -2px rgba(28,25,23,0.05), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-pop: 0 24px 48px -20px rgba(28,25,23,0.18), 0 4px 12px -4px rgba(15,23,22,0.08);
  --shadow-key: 0 18px 36px -14px rgba(13,148,136,0.28), 0 2px 8px rgba(28,25,23,0.05);

  /* ── SEMANTIC ROLES ──────────────────────────────────────── */
  --fg:       var(--ink);
  --fg-2:     var(--ink-3);
  --fg-muted: var(--muted);
  --link:     var(--teal);
  --focus:    var(--teal);
  --danger:   var(--rust);
  --success:  var(--lime);
  --warning:  var(--amber);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variation-settings: "opsz" 16, "wght" 400;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ============================================================
   TYPE SCALE
   Display (Bricolage) uses opsz for optical sizing. ALWAYS set
   font-variation-settings: "opsz" N, "wght" N on display text.
   Body sits on Inter at default 15/1.5.
   ============================================================ */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.display-xl {
  font-family: var(--display); font-size: 64px; line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 500;
  font-variation-settings: "opsz" 72, "wght" 500;
}
.display-lg {
  font-family: var(--display); font-size: 44px; line-height: 1.06;
  letter-spacing: -0.028em; font-weight: 500;
  font-variation-settings: "opsz" 48, "wght" 500;
}
.display-md {
  font-family: var(--display); font-size: 28px; line-height: 1.15;
  letter-spacing: -0.02em; font-weight: 500;
  font-variation-settings: "opsz" 32, "wght" 500;
}
.display-sm {
  font-family: var(--display); font-size: 20px; line-height: 1.2;
  letter-spacing: -0.015em; font-weight: 500;
  font-variation-settings: "opsz" 24, "wght" 500;
}

p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
p.body-lg { font-size: 17px; line-height: 1.5; }
p.body-sm { font-size: 13px; line-height: 1.5; }
p.muted   { color: var(--muted); }

.mono, .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.label-sm { font-size: 10px; letter-spacing: 0.08em; }

/* Italic phrase accent — proper nouns + emphasis, always teal. */
em.accent { font-style: italic; color: var(--teal); }

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }