/* Atendedor design tokens — the single source of truth for colour, type, shape and motion across
   the whole platform (homepage, auth, onboarding wizard, AI interview, research, dashboard,
   back office). Concatenated into /assets/app.css for every app-shell page and linked directly
   by the homepage. Change a value here and every surface follows. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Palette: warm paper, ink outlines, teal for the product, coral to act, sun to celebrate ---- */
  --cream: #fbf6ec;
  --cream-2: #f1e8d6;
  --paper: #fffdf8;
  --ink: #1b1a17;
  --ink-2: #4a4741;
  --ink-3: #6b675f;                       /* 5.2:1 on cream — the lightest text allowed */
  --teal: #0b5b56;
  --teal-deep: #083b38;
  --teal-soft: #d7efe9;
  --coral: #ff5a36;
  --coral-soft: #ffd9cf;
  --coral-ink: #a8300f;
  --sun: #ffd449;
  --sun-soft: #fff1bf;
  --lilac: #e9e1ff;

  /* ---- Semantic roles (what the app shell and islands actually use) ---- */
  --bg: var(--cream);
  --panel: var(--paper);
  --soft: var(--cream-2);
  --muted: var(--ink-2);
  --line: var(--ink);                     /* outlines: 2px ink */
  --line-soft: rgba(27, 26, 23, .18);     /* dividers inside a surface */
  --accent: var(--teal);                  /* product colour: progress, links, selected */
  --accent-soft: var(--teal-soft);
  --accent-ink: var(--teal-deep);
  --accent2: var(--coral);                /* legacy alias (was blue): focus + primary action */
  --cta: var(--coral);
  --highlight: var(--sun);
  --ok: var(--teal-deep);
  --ok-soft: var(--teal-soft);
  --warn: #7a4b00;
  --warn-soft: var(--sun-soft);
  --bad: #b42318;
  --bad-soft: var(--coral-soft);

  /* ---- Shape & depth: chunky corners, 2px ink borders, hard offset shadows ---- */
  --border: 2px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-xs: 2px 2px 0 var(--ink);
  --shadow-soft: 3px 3px 0 var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Motion & focus ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --focus-ring: 3px solid var(--ink);     /* 16:1 everywhere; coral fails the 3:1 non-text minimum */

  /* ---- Layout ---- */
  --wrap: 1180px;
  --pad: clamp(16px, 4vw, 40px);
}