/* ============================================================
   SITE TOKENS — the only file to edit for a recolor.
   ============================================================

   Everything the public site paints reads from a token below.
   No other stylesheet in `site/` contains a literal color, so
   swapping the palette is an edit to this block and nothing
   else: change `--brand`, reload, and headers, buttons, washes,
   shadows and borders all follow.

   Translucent values are derived with `color-mix()` from the
   base hues rather than written as fixed `rgba()`. A wash over a
   photo, the shadow under a card and the hairline on a dark band
   therefore stay in the palette after a change, instead of
   quietly keeping the old brand's green inside an alpha value.

   The names are roles, not hues: `--brand` rather than
   `--green`, `--accent` rather than `--amber`. A palette that
   turns blue and copper does not leave the stylesheets lying.
   ============================================================ */
:root {
  /* ---- palette: the approved Biztructura scheme ------------ */
  --paper: #ffffff;
  --brand-tint: #e8f0ec;
  --brand-tint-deep: #d9e6df;
  --brand: #2e5b4f;
  --brand-deep: #1d3b33;
  --brand-bright: #7fb3a2;
  --accent: #c26a2f;
  --accent-deep: #9c5121;
  --accent-tint: #f4e2d3;
  --ink: #1a1a1a;
  --ink-soft: #555555;

  /* Ink carried on top of a brand-colored surface. Set here so
     an inverted band never inherits the light-surface ink and
     renders low contrast. */
  --on-brand: #ffffff;

  /* ---- refusal ---------------------------------------------- */
  /* A rejected change is the one thing on the page that must not
     follow the palette: a brand that turns red would make every
     alert invisible, and one that turns green would make a
     refusal read as a success. These are their own base hues on
     purpose, and they are the only pair here that a recolor is
     expected to leave alone. */
  --danger: #b42318;
  --danger-tint: #fef3f2;

  /* ---- derived surfaces and lines -------------------------- */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-on-brand: color-mix(in srgb, var(--on-brand) 20%, transparent);
  --header-bg: color-mix(in srgb, var(--paper) 94%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 35%, transparent);

  /* Text tiers for inverted surfaces. */
  --on-brand-strong: color-mix(in srgb, var(--on-brand) 90%, transparent);
  --on-brand-soft: color-mix(in srgb, var(--on-brand) 82%, transparent);
  --on-brand-muted: color-mix(in srgb, var(--on-brand) 78%, transparent);
  --on-brand-dim: color-mix(in srgb, var(--on-brand) 65%, transparent);
  --on-brand-faint: color-mix(in srgb, var(--on-brand) 55%, transparent);
  --on-brand-press: color-mix(in srgb, var(--on-brand) 12%, transparent);
  --on-brand-edge: color-mix(in srgb, var(--on-brand) 35%, transparent);

  /* ---- elevation ------------------------------------------- */
  --shadow-card: 0 18px 40px
    color-mix(in srgb, var(--brand-deep) 22%, transparent);
  --shadow-paper: 0 20px 50px
    color-mix(in srgb, var(--brand-deep) 18%, transparent);
  --shadow-float: 0 24px 60px
    color-mix(in srgb, var(--brand-deep) 45%, transparent);

  /* ---- photo treatment ------------------------------------- */
  /* A brand wash keeps any photograph inside the palette. */
  --photo-wash: linear-gradient(170deg,
    color-mix(in srgb, var(--brand) 30%, transparent) 0%,
    color-mix(in srgb, var(--brand) 16%, transparent) 42%,
    color-mix(in srgb, var(--brand-deep) 55%, transparent) 100%);
  --photo-filter: saturate(0.55) contrast(1.06) brightness(0.97);
  --photo-filter-hover: saturate(0.78) contrast(1.06) brightness(1);
  --slot-bg: color-mix(in srgb, var(--paper) 86%, transparent);

  /* ---- printed-receipt surface ----------------------------- */
  /* Warm paper, kept as its own family: it is a printed object
     inside the page, not a brand surface. It still derives from
     the palette so a recolor carries. */
  --receipt-paper: color-mix(in srgb, var(--paper) 96%, var(--accent-tint));
  --receipt-ink: color-mix(in srgb, var(--brand-deep) 82%, var(--ink));
  --receipt-ink-mid: color-mix(in srgb, var(--brand-deep) 55%, var(--ink-soft));
  --receipt-ink-soft: color-mix(in srgb, var(--brand) 32%, var(--ink-soft));
  --receipt-line: color-mix(in srgb, var(--brand) 26%, var(--brand-tint-deep));

  /* ---- typography ------------------------------------------ */
  --font-display: "Poppins", "Montserrat", "Avenir Next",
    system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Open Sans", "Segoe UI",
    system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code",
    Menlo, Consolas, monospace;

  /* ---- measure and rhythm ---------------------------------- */
  --max-w: 1240px;
  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 10vh, 118px);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  /* Clears the fixed header on any page that opens with
     ordinary content instead of the hero's own padding.

     This is a FALLBACK, not a measurement: `site.js` replaces it
     with the height it reads off the live header, which grows to
     two and three rows as its links wrap. Without the script a
     page falls back to the value below, the height at the widths
     where nothing wraps. */
  --header-h: 78px;
}