/* assets/css/tokens.css
 * Verde — design tokens.
 *
 * The layout scale below came out of the Sasmax source file; the color
 * ramp is Verde's, sampled from verde-mark.png. To match the admin
 * exactly, drop in the values from styles/verde-tokens.css — only this
 * file needs to change.
 */

:root {
  /* ---- Brand ramp (sampled from the Verde mark) --------------------- */
  --verde-900: #053424; /* deepest fold in the mark                     */
  --verde-800: #08251a; /* dark panels, footer, line art                */
  --verde-600: #2fa372; /* saturated brand green: dots, hover states    */
  --verde-400: #6fcb9f; /* illustration accents, icons, marker strokes  */
  --verde-300: #a6e8c4; /* bright surfaces: bands, buttons              */
  --verde-100: #d8f2e2; /* lightest tint                                */
  --verde-50:  #eaf7ef; /* wash panels                                  */

  /* ---- Applied roles ------------------------------------------------ */
  --ink: #0b1f17;              /* body copy                             */
  --ink-soft: #46685a;         /* secondary copy inside light panels    */
  --forest: var(--verde-800);  /* dark cards, footer                    */
  --brand: var(--verde-600);
  --accent: var(--verde-400);  /* matches the recolored SVG art         */
  --band: var(--verde-300);    /* full-bleed brand bands                */
  --paper: var(--verde-50);    /* light panel inside dark containers    */
  --white: #ffffff;
  --card: #ffffff;             /* card sitting on a brand band          */
  --band-soft: #ddf4e4;        /* quieter alternative for a brand band  */
  --plate: #dce9e2;            /* logo placeholder plates               */
  --disc: #e3efe8;             /* integration circle plates             */
  --line: #d7e4dc;
  --danger: #c0392b;

  /* ---- Type --------------------------------------------------------- */
  --font-heading: "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
  --font-data: "Inter", system-ui, sans-serif;

  /* Handwritten face for eyebrows and the pull quote. */
  --font-accent: "Caveat", "Bradley Hand", cursive;

  /* Heading scale - H1 76 / H2 64 / H3 48 / H4 36 / H5 30 / H6 24 */
  --h1: 76px;

  /* 1.29 is PARAGRAPH leading on a display headline. The bigger the type, the
     less air a line needs — the eye has more letterform to track by, so the
     gap that stops 16px copy running together is a hole at 76px.
     1.08 is the display range. On a three-line hero that is 48px of height
     recovered without touching the type size, which is why this is the first
     thing to tighten rather than the last. */
  --h1-lh: 82px;
  --h2: 64px;
  --h2-lh: 83.2px;
  --h3: 48px;
  --h3-lh: 62.4px;
  --h4: 36px;
  --h4-lh: 46.8px;
  --h5: 30px;
  --h5-lh: 39px;
  --h6: 24px;
  --h6-lh: 31.2px;

  --body: 16px;
  --body-lh: 21px;
  --small: 14px;
  --small-lh: 18.2px;
  --lead: 18px;
  --lead-lh: 24px;

  /* ---- Layout ------------------------------------------------------- */
  --hero-h: 560px;             /* one band-hero height across the site  */
  /* THE HERO BAND IS NOW THE SAME WIDTH AS EVERY OTHER SECTION.
   *
   * It was 1460 against a 1300 container — "wider on purpose, so heroes
   * breathe". What that actually did was start a hero headline 80px to the
   * LEFT of every heading below it, so the top of each page sat on a different
   * grid from the rest of it. Breathing room bought at the cost of the one
   * alignment a reader notices without being able to say why.
   *
   * The art columns become proportional in the same pass — see the note on
   * each hero grid. Narrowing the band alone would have taken all 160px out of
   * the copy column and left the artwork untouched. */
  --hero-w: 1300px;
  /* ONE HERO SIZE, IN ONE PLACE.
   *
   * There were FIVE across nine pages — 73/95 on contact, 62/78 on six others,
   * 58/72 on hardware, and two smaller ones — each written out three times,
   * once per breakpoint. Twenty-seven declarations saying what should have
   * been one thing, which is exactly how they drifted apart.
   *
   * 58/72 is hardware's, which is the one that reads right: at 62 a two-word
   * line like "whole property" fills the column and the eye stops mid-phrase,
   * and contact's 73 was wider than the copy beneath it.
   *
   * Two deliberate exceptions keep their own sizes, noted where they live:
   * /status has a full sentence in its headline and /kb has an article title.
   * Neither is a marketing headline. */
  --hero: 58px;
  --hero-lh: 72px;

  --container: 1300px;
  --gutter: 24px;
  /* THE WORDMARK FACE.
   *
   * Garet is what was asked for and it is not a Google font — it is licensed
   * through its foundry, so it cannot just be added to the link tag. Outfit
   * is the closest free geometric sans: same near-circular bowls, same tall
   * x-height, same flat terminals, and it holds up at 700 where most
   * geometrics get gummy.
   *
   * If you buy Garet, self-host the woff2 and change this one line — nothing
   * else in the site references the face directly. */
  --font-brand: "Outfit", "Be Vietnam Pro", system-ui, sans-serif;

  --radius: 5px;
  --radius-btn: 3px;

  /* ---- Hard shadow ---------------------------------------------------
   * The site has exactly one shadow: a solid offset with no blur. It has
   * been on the buttons since the start; hero headlines now use the same
   * effect so the page reads as one idea rather than two.
   *
   * The colour is fixed here on purpose. It is darker than --band, so it
   * still registers at a 2px offset, and darker than the lime in
   * marker-stroke.svg, so a marked phrase keeps its shadow where the two
   * overlap. The offset is the only thing a caller sets, and it should
   * track type size — roughly 5% of the font size, in whole pixels, so
   * the edge stays hard instead of antialiasing into a blur. That lands
   * as 70px and up = 4px, 50-69px = 3px, under 50px = 2px.
   *
   * One cap on top of that: on a --white background the green has no band
   * softening it and the same offset reads heavier, so white-backed page
   * heads stop at 3px. That is index, careers and 404.
   */
  --hard-shadow: var(--verde-600);
  --hard-shadow-offset: 3px;
}

/* The hero scale steps down with the layout. Declared once here rather than in
   nine page stylesheets, so a change is one edit and the pages cannot
   disagree. */
@media (max-width: 1100px) {
  :root {
    --hero: 42px;
    --hero-lh: 54px;
  }
}

@media (max-width: 640px) {
  :root {
    --hero: 34px;
    --hero-lh: 44px;
  }
}