/* tokens.css — the whole brand as custom properties.
 *
 * Light and dark are ONE definition per token through light-dark(); the tri-state theme is
 * mapped onto `color-scheme` on :root (no attribute = follow the OS, data-theme = user choice).
 * `prefers-color-scheme` is used nowhere else in the stylesheets: the user's explicit choice has
 * to beat the operating system, and a media query cannot be overridden by an attribute.
 *
 * scripts/check-contrast.mjs parses this file — keep every colour token in the first :root
 * block as `--name: light-dark(#rrggbb, #rrggbb)` and repeat the light values in the
 * @supports fallback at the bottom (the script checks that the two agree).
 */

/* Piazzolla is display-only here: the optical-size axis is pinned at 30 and the weight axis
 * trimmed to 400–700, which is what makes the variable file small. The italic is a single
 * 550 instance declared over the same range so the browser never synthesises a bold italic. */
@font-face {
  font-family: "Piazzolla";
  src: url("../assets/fonts/piazzolla.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Piazzolla";
  src: url("../assets/fonts/piazzolla-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Surfaces — warm paper in light, graphite-teal in dark */
  --bg:          light-dark(#F5F2EA, #0D1615);
  --surface:     light-dark(#FFFFFF, #142120);
  --surface-2:   light-dark(#ECE8DE, #1B2B29);
  --line:        light-dark(#D8D3C6, #263835);
  --line-strong: light-dark(#7E8B88, #55706B);

  /* Text */
  --ink:   light-dark(#14211F, #E8EDE9);
  --muted: light-dark(#5C6B68, #9AACA7);

  /* Brand — verdigris (the seal) and copper (the action) */
  --primary:       light-dark(#1B5E5A, #3FA39C);
  --primary-hover: light-dark(#144845, #5BBDB6);
  --primary-soft:  light-dark(#DCEBE8, #14312F);
  --on-primary:    light-dark(#FFFFFF, #0D1615);

  /* Light copper is burnt rather than bright so it reads as text on every surface (AA). */
  --accent:       light-dark(#A24D18, #E08A4A);
  --accent-hover: light-dark(#853C10, #EBA26D);
  --accent-soft:  light-dark(#F7E3D3, #3A2416);
  --on-accent:    light-dark(#FFFFFF, #0D1615);

  /* Status — approved / pending / declined, readable as text on --bg and on their soft tint */
  --ok:        light-dark(#256B3F, #63C282);
  --ok-soft:   light-dark(#DCEFE1, #163826);
  --wait:      light-dark(#7F5B10, #E0B04A);
  --wait-soft: light-dark(#F6EBC9, #3A2F12);
  --no:        light-dark(#A33A29, #E2705C);
  --no-soft:   light-dark(#F8DDD6, #3B1C18);

  /* Type */
  --font-display: "Piazzolla", "Literata", Georgia, "Times New Roman", serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "Onest", ui-monospace, Menlo, Consolas, monospace;

  /* Shape and rhythm */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-float: 0 12px 32px -12px rgb(20 33 31 / 0.25), 0 2px 6px rgb(20 33 31 / 0.08);
  --header-h: 64px;
  --gutter: 16px;
  --content: 72rem;
  --header-w: 80rem;   /* the header row is wider than the article column; see site.css */
  --measure: 62ch;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Browsers without light-dark() (pre-2024) get the light palette rather than unstyled colours. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #F5F2EA;
    --surface: #FFFFFF;
    --surface-2: #ECE8DE;
    --line: #D8D3C6;
    --line-strong: #7E8B88;
    --ink: #14211F;
    --muted: #5C6B68;
    --primary: #1B5E5A;
    --primary-hover: #144845;
    --primary-soft: #DCEBE8;
    --on-primary: #FFFFFF;
    --accent: #A24D18;
    --accent-hover: #853C10;
    --accent-soft: #F7E3D3;
    --on-accent: #FFFFFF;
    --ok: #256B3F;
    --ok-soft: #DCEFE1;
    --wait: #7F5B10;
    --wait-soft: #F6EBC9;
    --no: #A33A29;
    --no-soft: #F8DDD6;
  }
}