/*
 * Flag design tokens.
 *
 * Derived from flagstaff.nz (see docs/04a-design-system.md). The gallery's own
 * site is white, flat, square-cornered and near-monochrome, with the artwork
 * carrying all the colour. These tokens keep that discipline and change only
 * what an admin tool at a counter genuinely needs.
 *
 * Every value lives on :root so a dark theme is one added block, not a rewrite.
 */

/* Figtree — SIL Open Font License 1.1, self-hosted. One variable file per
   subset covers weights 300-800, so there is one request and no layout shift
   between weights. latin-ext carries the macrons te reo Māori needs. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Palette -------------------------------------------------------- */
  /* Six values. --ink and --sage are the gallery's own; the rest are the
     minimum an interface needs on top of them. */
  --ink: #141414;          /* headings, body, buttons — their theme colour */
  --ink-muted: #5c5c5c;    /* secondary text. 7.0:1 on paper; their #828282 was 3.5:1 */
  --line: #dfdfdf;         /* rules and borders. A border, not text */
  --paper: #ffffff;        /* page and surfaces */
  --wash: #f6f6f5;         /* second surface: table heads, page bands */
  --sage: #9aa8ab;         /* the gallery accent, from their banner */

  /* State. Admin-only — the public site never reports an overdue consignment.
     All three meet AA against --paper at 14px. */
  --danger: #9b2c1e;
  --warn: #8a6a1f;
  --ok: #2f6b46;

  /* Tints, for badge and notice backgrounds. Kept pale so a row of badges
     does not become the loudest thing on a page of artwork. */
  --danger-wash: #fbeeec;
  --warn-wash: #faf4e6;
  --ok-wash: #edf4ef;
  --sage-wash: #eef1f1;

  /* ---- Type ----------------------------------------------------------- */
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The site builds hierarchy from size and letter-spacing at a single
     weight. This keeps that, adding weight only where a label must separate
     itself from the data beside it. */
  --text-display: 2rem;      /* 32px */
  --text-title: 1.375rem;    /* 22px */
  --text-section: 0.9375rem; /* 15px, weight 500 */
  /* The portal's own heading sizes. Referenced in four rules and, like
     --space-5, never defined — so those headings fell back to inherited. */
  --text-h2: 1.375rem;       /* 22px */
  --text-h3: 1.125rem;       /* 18px */
  --text-body: 0.9375rem;    /* 15px — up from their 13px; staff read all day */
  --text-small: 0.8125rem;   /* 13px */
  --text-label: 0.75rem;     /* 12px, uppercase */

  --tracking-display: 0.05em;
  --tracking-title: 0.035em;
  --tracking-label: 0.06em;
  --tracking-body: 0.006em;

  --leading-tight: 1.2;
  --leading-body: 1.55;

  /* ---- Space ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  /*
   * Referenced in four rules across app.css and portal.css and never defined,
   * so every one of those declarations was invalid and silently dropped. A
   * shorthand takes the whole declaration with it: `.portal-card` asked for
   * `padding: var(--space-5)` and got none at all, and so did the portal's
   * sign-in button. `.detail-grid` has had no column gap since stage 11B.
   *
   * Defined rather than the four uses rewritten, because 1.25rem is what each
   * of them meant and the scale had a hole in it.
   */
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Shape ---------------------------------------------------------- */
  /* Zero, everywhere. Every border-radius measured on flagstaff.nz was 0px,
     and square corners are the single clearest signal that this application
     belongs to that gallery. */
  --radius: 0;

  /* One shadow, for one purpose: a modal must read as above the page, and
     space alone cannot say that. Nothing else is shadowed. */
  --shadow-modal: 0 8px 40px rgb(20 20 20 / 18%);

  /* ---- Layout --------------------------------------------------------- */
  --container: 1600px;    /* matches theirs */
  --measure: 68ch;        /* prose column */
  --control-height: 2.75rem; /* 44px — a tablet at the counter */

  /* ---- Z-index -------------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Motion --------------------------------------------------------- */
  /* Only in response to an action: opening, expanding, confirming. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration: 140ms;
}

/* Breakpoints are documented here because custom properties cannot be used in
   media queries. Used consistently across app.css:
     --bp-phone:   40rem  (640px)
     --bp-tablet:  60rem  (960px)
     --bp-desktop: 80rem  (1280px) */

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}