/* Marco: Staffroom design tokens
 *
 * The canonical source. The teacher website and the admin dashboard copy this file in at
 * build time, and the Flutter app mirrors it in `mobile/lib/design/tokens.dart`, so a token
 * changes in one place or it drifts in three.
 *
 * STRUCTURE follows MARCO-UI-LOOKFEEL-001 (docs/design/MARCO-UI-LOOKFEEL-001.md), adopted on
 * 2026-09-11 as D70: its radii, spacing, shadow tiers, control heights and type scale. The
 * names stay `--marco-*`, because a second token system beside this one is how a closed
 * palette stops being one.
 *
 * COLOUR is Nexus-Ed, ruled on 2026-09-20 as D77, superseding D70's warm neutrals and burnt
 * orange and nothing else of D70. Midnight ink, a crimson accent, a cooler ground. Every
 * token name survived the change, which is what let four surfaces follow it without an edit:
 * both marketing sites and both ASP.NET surfaces copy this file. The two that restate it,
 * `mobile/lib/design/tokens.dart` and `report_pdf.py`, are held against it by
 * `backend/tests/test_the_palette_has_one_source.py`, which exists because the second of them
 * had drifted for nine days and nothing could say so.
 *
 * Every pair below was measured before it was written: 23 foreground-on-ground pairs, none
 * under 4.5:1. Two are deliberately not: crimson on midnight is 2.16:1, which is why the
 * tick is a SHAPE there and never a label (a button on that ground takes its own colour);
 * and `--marco-line-strong` on the page is 1.67:1, which is an input BORDER rather than
 * text, was 1.46:1 before this change, and is recorded as a pre-existing gap rather than
 * quietly redesigned here.
 *
 * 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 {
  /* --- 60: neutrals ----------------------------------------------------------------- */
  --marco-page: #FAF8F5;        /* the page ground */
  --marco-cream: #FAF8F5;       /* app surface */
  --marco-cream-2: #F4F2EC;     /* muted: wells, chips, tab tracks, hover */
  --marco-white: #FFFFFF;       /* cards */
  --marco-line: #E8E4DC;        /* every border and rule */
  --marco-line-strong: #C8C2B6; /* input borders, outline buttons */

  /* --- 30: ink, now midnight (navigation, chrome, links, icons) --------------------- */
  --marco-ink: #0C1B2A;
  --marco-ink-soft: #6B6B74;    /* secondary text, labels, metadata, placeholders */
  --marco-ink-900: #071320;
  --marco-ink-700: #2F3A45;     /* ghost and secondary button text, form labels */
  --marco-ink-500: #52525B;     /* prose */
  --marco-ink-100: #E4E7EA;     /* avatar grounds, chart fills */
  --marco-ink-a06: rgba(12, 27, 42, 0.06);
  --marco-overlay: rgba(12, 27, 42, 0.80);

  /* --- 10: crimson (the one primary action, flags, focus, Marco's voice) ------------- */
  /* A crimson is a red, and this product still has no colour that MEANS an error: see the
     aliases below. It is the brand's one accent, on a light ground, where it measures
     7.62:1. On the ink ground it is 2.16:1 and may be a shape and never a label. */
  --marco-accent: #9B1C2E;
  --marco-accent-hover: #7F1727;
  --marco-accent-tint: #FAEFF1; /* flag and badge ground, Marco's card */
  --marco-accent-100: #F2D9DE;  /* badge ground on a tinted surface */
  --marco-accent-deep: #6E1220; /* text on the accent tint */

  /* --- semantic states -------------------------------------------------------------- */
  --marco-green: #1B6B3A;
  --marco-green-tint: #E7F1EA;
  --marco-warning: #806119;
  --marco-warning-tint: #F7F0DC;
  --marco-info: #4A5560;        /* info is a neutral: it is not a signal blue */
  --marco-info-tint: #EDF0F2;

  /* Semantic aliases. **No colour in this product means "you did something wrong."** The
     lexicon forbids the word error (marco-voice-guide.md), so nothing may signal one by hue:
     a flag is accent; a resolution is green; a provisional state is ink-soft. A destructive
     action is an outline button with a clear label, never a filled one (D70).

     This paragraph read "Marco has no red" until D77, which is a sentence about a HUE and was
     the wrong way to write the rule down. The accent is now a crimson and the ink is a
     blue-black, and neither is a status. Worth knowing how the old wording was enforced:
     three tests and a rule file searched a STYLESHEET for the keywords red, crimson,
     firebrick, blue and navy, and those stylesheets are separately forbidden from naming any
     colour at all, because the colours are here. So all four would have gone on passing
     through this change while the claim under them stopped being true. */
  --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);

  /* --- sidebar: the one surface that is not page ground ----------------------------- */
  /* **Whether this stays light is NOT settled and is the operator's.** D70 ruled it
     parchment, "replacing the dark ink margin"; the click-through approved on 2026-09-20
     gives the teacher app a midnight one, which is this one token and which spends the thing
     that makes the admin plane visibly not the teacher app. So the ground stays light here
     and moved only from a warm parchment to a neutral one, because a warm parchment is the
     brown D77 removed. The ACTIVE state had to move either way: it was the burnt orange at
     12% and is now the crimson.

     The group label is the one contrast this change repairs rather than preserves: it was
     3.22:1 on the old parchment, which fails, and is 5.05:1 now. */
  --marco-sidebar-bg: #F1EFEA;
  --marco-sidebar-text: #2F3A45;
  --marco-sidebar-group: #5F6670;
  --marco-sidebar-hover: rgba(12, 27, 42, 0.06);
  --marco-sidebar-active-bg: rgba(155, 28, 46, 0.12);
  --marco-sidebar-active-text: #7F1727;
  --marco-sidebar-border: rgba(12, 27, 42, 0.10);
  --marco-sidebar-width: 256px;
  --marco-sidebar-width-collapsed: 64px; /* the rail: icons only, the label in a tooltip */
  --marco-header-height: 64px;           /* the bar carrying the credit balance */

  /* --- the admin plane's margin: the one dark surface, kept on purpose (D70) ---------- */
  /* The dashboard stays visibly NOT the teacher app; its margin is ink with cream on it. */
  --marco-margin-hover: rgba(250, 248, 245, 0.06);
  --marco-margin-rule: rgba(250, 248, 245, 0.10);

  /* --- type: four families, split by job -------------------------------------------- */
  --marco-font-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;  /* all UI chrome */
  --marco-font-voice: "Newsreader", Georgia, serif;                 /* prose a teacher reads */
  --marco-font-display: "Fraunces", Georgia, serif;                 /* wordmark, page and dialog titles */
  --marco-font-mono: "JetBrains Mono", "Courier New", monospace;    /* marks, totals, codes ARE data */

  --marco-text-eyebrow: 0.6875rem; /* 11: group labels, uppercase, tracked */
  --marco-text-meta: 0.75rem;      /* 12: captions, hints, badges, table headers */
  --marco-text-small: 0.8125rem;   /* 13: form labels, mono cells */
  --marco-text-body: 0.875rem;     /* 14: UI default */
  --marco-text-voice: 1rem;        /* 16: prose */
  --marco-text-card-title: 1.125rem;   /* 18: card titles, Manrope */
  --marco-text-dialog-title: 1.25rem;  /* 20: dialog titles, Fraunces */
  --marco-text-title: 1.625rem;        /* 26: page titles, Fraunces */
  --marco-text-metric: 1.75rem;        /* 28: metric values, mono */

  --marco-tracking-eyebrow: 0.09em;
  --marco-tracking-mono: 0.03em;
  --marco-prose-measure: 66ch;

  /* --- shape: larger surfaces softer, things you type into crispest ----------------- */
  --marco-radius: 12px;          /* cards */
  --marco-radius-sm: 6px;        /* inputs, wells, nav items */
  --marco-radius-btn: 8px;       /* buttons, tab tracks */
  --marco-radius-modal: 16px;    /* dialogs */
  --marco-radius-pill: 9999px;   /* badges */
  --marco-frame-radius: 28px;

  /* --- spacing: 4px steps; 8 inside a control, 12 icon+label, 24 containers ---------- */
  --marco-gap-xs: 4px;
  --marco-gap-sm: 8px;
  --marco-gap: 12px;
  --marco-gap-lg: 16px;
  --marco-gap-xl: 24px;
  --marco-pad-card: 24px;        /* web; the app uses 16 (tokens.dart) */
  --marco-pad-page: 24px;        /* the shell's gutter; pages add none of their own */
  --marco-pad-screen: 20px 18px 96px;
  --marco-control-h: 40px;       /* inputs and default buttons align */
  --marco-control-h-sm: 36px;
  --marco-control-h-lg: 44px;

  /* --- elevation: one job each, ink-tinted. Depth means interactive, not important --- */
  --marco-shadow-card: 0 1px 3px rgba(12, 27, 42, 0.08), 0 1px 2px rgba(12, 27, 42, 0.06);
  --marco-shadow-raised: 0 4px 12px rgba(12, 27, 42, 0.10), 0 2px 4px rgba(12, 27, 42, 0.06);
  --marco-shadow-modal: 0 24px 48px rgba(12, 27, 42, 0.20), 0 8px 16px rgba(12, 27, 42, 0.10);
  --marco-shadow-frame: 0 0 40px rgba(12, 27, 42, 0.12);
  --marco-shadow-seg: 0 1px 2px rgba(12, 27, 42, 0.08);

  /* --- motion --------------------------------------------------------------------- */
  --marco-transition: 0.15s ease;
  --marco-screen-fade: 0.22s ease;
  --marco-sidebar-transition: 0.3s 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;
    --marco-sidebar-transition: 0s;
  }
}