/* Odoki Method Brand Guidelines v2 — interface tokens (public site).
 * Mirror of app/hub/src/styles/tokens.css — keep the two identical.
 * This is the ONLY site file where raw hex values, px sizes and ms
 * durations for themed values may live. Everything else must
 * reference these variables. Sections marked INTERIM are pending
 * designer confirmation — keep them isolated here.
 */

:root {
  /* ── Palette (v2 core + extended) ──────────────────────── */
  --odoki-blue: #414E6B;
  --paper: #E7E7E7;
  --bone: #DFDBC5;
  --midnight: #1D0531;
  --breath: #D4CEE1;
  --quiet-violet: #B4B2C9;
  --sage-mist: #C0D0C6;
  --clear-sky: #7694F3;
  --dusk: #896F96;
  --deep-water: #27404C;
  --pine: #305134;
  --steady-green: #66926A;
  --aubergine: #56445F;
  --ember: #381715;
  --clay: #C27D72;
  --signal-blue: #361EDA;
  --alert-red: #CD4E4F;
  --high-beam: #FFFD5C;
  --white: #FFFFFF;

  /* ── Interface tokens, light theme ─────────────────────── */
  --surface-base:   var(--paper);
  --surface-raised: var(--white);
  --surface-sunken: var(--breath);
  --border-subtle:  var(--quiet-violet);
  --text-primary:   var(--odoki-blue);
  --text-secondary: var(--aubergine); /* INTERIM: PDF says Dusk (3.55:1 on Paper, fails AA) */
  --action-primary: var(--signal-blue);
  --action-hover:   var(--odoki-blue);
  --text-on-action: var(--paper); /* INTERIM: added token */
  --status-positive: var(--pine);
  --status-critical: var(--alert-red);
  --focus-ring:     var(--signal-blue);
  --progress-fill:  var(--odoki-blue); /* INTERIM: keeps Signal Blue to one element per surface */
  --progress-track: var(--quiet-violet);
  --link-color:     var(--text-primary);
  --scrim:          rgba(29, 5, 49, 0.5); /* Midnight at 50% */

  /* ── Typography ────────────────────────────────────────── */
  --font-display: "ABC Diatype Rounded", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-mono: "abc-rounded-mono", "ABC Diatype Rounded", monospace;
  --font-text: "Whyte", Inter, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (size / line-height / letter-spacing) */
  --type-display-size: 72px;   --type-display-leading: 80px;   --type-display-tracking: -0.025em;
  --type-h1-size: 48px;        --type-h1-leading: 56px;        --type-h1-tracking: -0.02em;
  --type-h2-size: 32px;        --type-h2-leading: 42px;        --type-h2-tracking: -0.015em;
  --type-h3-size: 24px;        --type-h3-leading: 32px;        --type-h3-tracking: -0.01em;
  --type-lead-size: 20px;      --type-lead-leading: 30px;      --type-lead-tracking: -0.005em;
  --type-body-size: 16px;      --type-body-leading: 26px;
  --type-body-small-size: 14px; --type-body-small-leading: 22px;
  --type-label-size: 12px;     --type-label-leading: 16px;     --type-label-tracking: 0.08em;
  --type-caption-size: 12px;   --type-caption-leading: 18px;   --type-caption-tracking: 0.01em;

  /* ── Shape / radius ────────────────────────────────────── */
  --radius-chrome: 8px;   /* inputs, small controls, menu items under 64px */
  --radius-pill: 9999px;  /* lozenge: buttons, tags, stat chips */
  --radius-card: 24px;    /* squircle stand-in: cards, panels, modals */

  /* ── Motion ────────────────────────────────────────────── */
  --dur-hover: 120ms;
  --dur-state: 200ms;
  --dur-content: 400ms;
  --dur-page: 700ms;
  --ease-settle: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: ease-out;

  /* ── Layout ────────────────────────────────────────────── */
  --content-margin: 48px; /* INTERIM: hub app shell margin at 1024+ */
}

/* BRAND-OPEN: mobile sizes for Display/Headline — interim clamp below 640px */
@media (max-width: 640px) {
  :root {
    --type-display-size: 40px; --type-display-leading: 48px;
    --type-h1-size: 32px;      --type-h1-leading: 40px;
    --type-h2-size: 26px;      --type-h2-leading: 34px;
    --content-margin: 24px;
  }
}