/* ---------------------------------------------------------------------------
   Flying Turtle design tokens — the whole system's palette and type scale.

   These are the same values the public site uses (site/static/css/global.css),
   so the ERP and flying-turtle.uk read as one brand. Every other stylesheet in
   here references these; no module stylesheet should introduce a raw hex.

   FONTS: the stacks are deliberately identical to the site's, webfont first.
   The site loads Kanit and Libre Baskerville from Google; the ERP does NOT —
   it is an internal tool with an 80KB page-weight budget and no reason to make
   a third-party request on every page. The fallbacks (system geometric sans,
   Palatino) are what actually render today. Self-host a subset of Kanit and the
   whole system upgrades with no other change, because the stack already names
   it first.
   --------------------------------------------------------------------------- */

:root {
  /* brand — from the public site, unchanged */
  --brown: #523d30;
  --brown-mid: #746253;
  --taupe: #84776f;
  --sand: #d7d0c9;
  --cream: #eae6e1;
  --terracotta: #d17e57;
  --ink: #1c1410;
  --espresso: #2c211b;
  --paper: #f6f2ed;

  /* derived surfaces — an ERP needs more steps than a 4-page website */
  --surface: #ffffff;
  --surface-sunk: #f1ece6;
  --line: var(--sand);
  --line-soft: #e6e0d9;
  --text: var(--brown);
  --text-muted: var(--brown-mid);
  --text-faint: var(--taupe);

  --accent: var(--terracotta);
  --accent-strong: #c46b44;
  --accent-wash: #f7ece5;
  --on-accent: #ffffff;

  /* semantic — hue-shifted towards the brand's warmth rather than stock */
  --ok: #4f7a52;
  --ok-wash: #eaf1ea;
  --warn: #b8823c;
  --warn-wash: #f7efe2;
  --danger: #a4452f;
  --danger-wash: #f7e9e5;
  /* Status chips carried four hues. Two survive as their own tokens so the
     distinctions they encode are not flattened into one accent colour. */
  --info: #5b7a8c;
  --info-wash: #e9eff2;
  --special: #7a5a6e;
  --special-wash: #f1eaee;

  --sans: "Kanit", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "Libre Baskerville", "Palatino Linotype", Palatino, Georgia, serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-md: 0 4px 18px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-lg: 0 18px 50px color-mix(in srgb, var(--ink) 18%, transparent);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- base ------------------------------------------------------------- */

/* The hidden attribute must win. Its display:none comes from the UA sheet, so
   any class rule setting `display` outranks it and the element stays visible -
   which is how the mail reader's controls rendered while marked hidden. */
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--espresso);
}

/* The uppercase letterspaced label is the site's signature detail — it is what
   makes a dense admin screen read as considered rather than generic. */
.kicker,
.field-label,
.topbar a,
.tab {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
}