/* Marco — Staffroom design tokens
 *
 * Extracted verbatim from docs/design/marco-prototype-v0.html, which remains the visual
 * reference for the review surface (S16/S17). This file is the canonical source: the
 * Flutter theme and the marketing site both derive from these values, so a token changes
 * in one place or it drifts in three.
 *
 * Voice discipline shows up here too. Marco speaks in a serif card (.marco) and nowhere
 * else; if a token tempts you to give a quiet screen a voice, that is a design regression
 * (screen-inventory-v0.md).
 */

:root {
  /* --- surface -------------------------------------------------------------------- */
  --marco-page: #EAE3D4;        /* behind the frame */
  --marco-cream: #FAF6EF;       /* app surface */
  --marco-cream-2: #F3EDE0;     /* wells, chips, inactive segments */
  --marco-white: #FFFFFF;       /* cards */
  --marco-line: #E7DFD0;        /* every border and rule */

  /* --- ink ------------------------------------------------------------------------ */
  --marco-ink: #221F1A;
  --marco-ink-soft: #6B6459;    /* secondary text, labels, metadata */

  /* --- accent: Marco's voice, flags, and HO emphasis ------------------------------- */
  --marco-accent: #C3511C;
  --marco-accent-tint: rgba(195, 81, 28, 0.08);

  /* --- resolved / confirmed -------------------------------------------------------- */
  --marco-green: #3E6B4F;
  --marco-green-tint: rgba(62, 107, 79, 0.10);

  /* Semantic aliases. Marco has no red: nothing in this product is an "error" — the
     lexicon forbids it (marco-voice-guide.md), so the palette does not offer one.
     A flag is accent; a resolution is green; a provisional state is ink-soft. */
  --marco-flag: var(--marco-accent);
  --marco-flag-tint: var(--marco-accent-tint);
  --marco-resolved: var(--marco-green);
  --marco-resolved-tint: var(--marco-green-tint);
  --marco-provisional: var(--marco-ink-soft);

  /* --- type ----------------------------------------------------------------------- */
  --marco-font-ui: "Manrope", system-ui, sans-serif;         /* chrome, controls, labels */
  --marco-font-voice: "Newsreader", Georgia, serif;          /* Marco speaking, subheads */
  --marco-font-display: "Fraunces", Georgia, serif;          /* wordmark, page titles */
  --marco-font-mono: "JetBrains Mono", ui-monospace, monospace; /* marks and codes ARE data */

  --marco-text-eyebrow: 0.62rem;   /* mono, uppercase, tracked */
  --marco-text-meta: 0.66rem;
  --marco-text-small: 0.8rem;
  --marco-text-body: 0.95rem;
  --marco-text-voice: 1rem;
  --marco-text-title: 1.55rem;

  --marco-tracking-eyebrow: 0.12em;
  --marco-tracking-mono: 0.03em;

  /* --- shape ---------------------------------------------------------------------- */
  --marco-radius: 14px;          /* cards */
  --marco-radius-sm: 10px;       /* inputs, wells */
  --marco-radius-btn: 12px;
  --marco-radius-pill: 99px;
  --marco-frame-radius: 28px;

  /* --- spacing -------------------------------------------------------------------- */
  --marco-gap-xs: 4px;
  --marco-gap-sm: 8px;
  --marco-gap: 12px;
  --marco-gap-lg: 18px;
  --marco-pad-card: 16px;
  --marco-pad-screen: 20px 18px 96px;

  /* --- elevation ------------------------------------------------------------------ */
  --marco-shadow-frame: 0 0 40px rgba(34, 31, 26, 0.12);
  --marco-shadow-seg: 0 1px 2px rgba(34, 31, 26, 0.08);

  /* --- motion --------------------------------------------------------------------- */
  --marco-transition: 0.15s ease;
  --marco-screen-fade: 0.22s ease;

  /* --- layout --------------------------------------------------------------------- */
  --marco-frame-max: 400px;      /* the teacher is on a phone, in a staffroom */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --marco-transition: 0s;
    --marco-screen-fade: 0s;
  }
}