/*
 * RRYM / 002 — SULSYS
 * Design tokens. Two worlds, one system (see the Sulsys block below):
 *   SULSYS  the house   -- navy surfaces, Sulsys blue, the company's own voice
 *   NEXYS   the record -- paper, ink, rules and the green, the product
 * Radius 0 everywhere. No shadows except the focus ring.
 *
 * V3: the palette is no longer approximated. Every blue on this page is the
 * hue of the Sulsys mark (221°) and every green is its green (142°), both
 * measured off the approved reference in assets-source/brand/. The two accents
 * are not derived at all -- they are the mark's own values, unmodified:
 *
 *   --mark-blue   #012A81   sampled from the blades and the "SulSys"
 *   --mark-green  #059E3D   sampled from the blades and the ".Net"
 *
 * which is what makes the site and the doormat the same brand rather than two
 * things that look similar. Surfaces and text colours are tuned from those two
 * hues until they hit their contrast targets; the measured figure is recorded
 * beside each one and was produced by the ratio, not by eye.
 */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --paper: #f6f5f1; /* page background */
  --paper-2: #eeede8; /* alternate bands, table header rows */
  --mat: #dcdbd5; /* screen mats */

  /* ---- Ink ------------------------------------------------------------ */
  /*
   * Contrast was measured against the surface each token actually sits on
   * (Blueprint 08 asked for this check in WP02). The Blueprint's working
   * values for --muted and the green button both failed, so both are resolved
   * here rather than left to a later pass:
   *
   *   --ink      on --paper   18.7:1
   *   --ink-2    on --paper    7.9:1
   *   --muted    on --paper    5.9:1 · on --paper-2 5.5:1 · on --mat 4.6:1
   *   --muted-2  on --ink      6.7:1  (--muted is unreadable on the dark bands)
   *   --mat      on --ink     13.4:1
   *
   * --muted is tuned against --mat, the darkest surface it ever sits on (the
   * blueprint sheet's caption), not against --paper. The Blueprint's #8A8B86
   * managed only 3.2:1 even on paper.
   */
  --ink: #121412; /* text, rules on dark bands, footer background */
  --ink-2: #4a4c48; /* secondary text */
  --muted: #5e5f5a; /* captions and labels on every light surface */
  --muted-2: #9a9b95; /* the same role on the ink bands */
  --rule: #c4c3bc; /* 1 px rules and table borders — structure, not controls */
  --rule-strong: #6f706b; /* borders that identify a control: fields, chips */

  /* ---- The mark ------------------------------------------------------- */
  /*
   * Sampled from the approved reference. These two are never adjusted: they
   * are the brand, and everything below is tuned around them.
   */
  --mark-blue: #012a81;
  --mark-green: #059e3d;

  /* The mark paints itself from these; --sulsys-ink flips on dark surfaces. */
  --sulsys-ink: var(--mark-blue);
  --sulsys-green: var(--mark-green);
  --sulsys-quiet: #363639; /* the tagline grey, also sampled */

  /* ---- Action --------------------------------------------------------- */
  /*
   * --green is the mark's green exactly. At 3.2:1 against paper it cannot
   * carry text or mark a state, so it does what it does in the logo itself:
   * it is a blade, an accent, a rule on a dark band. Every use that has to be
   * legible -- the primary button, the posted total, the selected-row bar --
   * takes --green-ink, which is the same hue pushed down until it passes.
   *
   *   --green      on --navy     5.0:1   (dark bands and accents only)
   *   --green      on --ink      5.3:1
   *   --green-ink  on --paper    4.9:1
   *   white        on --green-ink 5.4:1  (the primary button)
   *   white        on --green-dark 7.8:1 (its hover)
   */
  --green: var(--mark-green);
  --green-ink: #0a7b33;
  --green-dark: #075f27;
  --red: #b3261e; /* form errors only */

  /* ---- Sulsys: the company ------------------------------------------- */
  /*
   * The company has its own colour and it is not the product's green. The real
   * mark is blue *and* green with the tagline "Future at your reach"; the
   * first build had neither, used only a green, and the company duly vanished
   * behind its own product.
   *
   * So: --navy carries Sulsys surfaces (masthead, company bands, footer),
   * --blue is the company accent on light, --blue-2 the same role on navy.
   * Green stays what it has always been: the product and its actions.
   *
   * --blue is not a near-miss of the logo blue any more. It *is* the logo
   * blue, and it passes everywhere it is asked to carry text.
   *
   *   white      on --navy    17.7:1
   *   --mat      on --navy    12.8:1
   *   --blue-2   on --navy     7.2:1
   *   --green    on --navy     5.0:1   (accents and rules, not body text)
   *   --blue     on --paper   11.7:1
   *   --blue     on --paper-2 10.9:1
   *   white      on --blue    12.7:1   (the company button)
   */
  --navy: #091734; /* Sulsys surface -- the house */
  --navy-2: #12254e; /* raised rows and panels on navy */
  --blue: var(--mark-blue); /* Sulsys accent on light surfaces */
  --blue-2: #84a5eb; /* the same role on navy */
  --rule-navy: #243966; /* 1 px rules inside a navy band */

  /* ---- Rules on dark -------------------------------------------------- */
  --rule-dark: #2e312d;

  /* ---- Type ----------------------------------------------------------- */
  /*
   * V4: two voices. Commissioner for display and text; JetBrains Mono for
   * everything the program itself would print. --step-record is the mono
   * display size the product worlds set their documents in.
   */
  --font-display: var(--font-commissioner), "Commissioner", system-ui, sans-serif;
  --font-body: var(--font-commissioner), "Commissioner", system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, monospace;

  --step-display: clamp(2.25rem, 5.4vw, 4.875rem); /* 36 → 78 px */
  --step-h2: clamp(1.75rem, 3vw, 2.5rem); /* 28 → 40 px */
  --step-h3: 1.25rem; /* 20 px */
  --step-record: clamp(1.25rem, 2.4vw, 2rem); /* 20 → 32 px, the document voice */
  --step-body: 1rem; /* 16 px */
  --step-small: 0.875rem; /* 14 px */
  --step-mono: 0.8125rem; /* 13 px */
  --step-label: 0.6875rem; /* 11 px */

  --lh-display: 0.98;
  --lh-body: 1.55;
  --measure: 66ch;

  /* ---- Space ---------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --s11: 160px;

  /* Chapter padding: 96 / 128 / 160 at 375 / 768 / 1440. More air between
     chapters, less inside them — that is where the rhythm comes from. */
  --section-y: var(--s11);

  /* ---- Grid ----------------------------------------------------------- */
  --container: 1280px;
  --gutter: 24px;
  --pad-x: 40px;

  /* ---- Geometry ------------------------------------------------------- */
  --radius: 0;
  --hairline: 1px;
  --control-h: 44px;
  --field-h: 48px;
  --row-h: 48px;
  --header-h: 64px;

  /* ---- Motion --------------------------------------------------------- */
  /*
   * RRYM: tension → impact → release, and cinematic does not mean slow. The
   * scale tops out at 420 ms because nothing on this site is worth waiting
   * half a second for. --ease is the only curve: a hard out-ease that leaves
   * immediately and settles, which is how a posted record should feel.
   */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-colour: 120ms;
  --t-fast: 160ms; /* impact: a state that has already happened */
  --t-base: 240ms; /* the default move */
  --t-slow: 420ms; /* release: the longest anything may take */

  /*
   * The four modules of Nexys. One system, four operational realities — so
   * they share the geometry and differ in exactly one dimension, the accent
   * that marks their own documents.
   *
   * The pairing is the point, not four unrelated colours. Finance and Budget
   * take the company's blue because they are the ledger side of a business;
   * MAT and Caffe take its green because they are where goods and orders
   * actually move. Within each pair the lighter value is the faster-moving of
   * the two, which is why Caffe — tables, orders, a bill closed in a minute —
   * is the brightest thing on the strip.
   *
   * Every one of these carries small mono text (the module code in the run and
   * in a module page's eyebrow), so every one is measured against both paper
   * surfaces rather than only the lighter one:
   *
   *   --m-financa        on --paper 11.7:1 · on --paper-2 10.9:1
   *   --m-paga           on --paper  9.3:1 · on --paper-2  8.7:1
   *   --m-materiale      on --paper  6.6:1 · on --paper-2  6.1:1
   *   --m-bar-restorant  on --paper  4.9:1 · on --paper-2  4.6:1
   */
  --m-financa: var(--blue);
  --m-paga: #2a406f;
  --m-materiale: #056629;
  --m-bar-restorant: #0a7b33;
}

@media (max-width: 1279px) {
  :root {
    --gutter: 20px;
    --pad-x: 24px;
    --section-y: var(--s10);
    --step-display: clamp(2.25rem, 5.4vw, 3.5rem); /* caps at 56 px on tablet */
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --pad-x: 16px;
    --section-y: var(--s9);
    --header-h: 56px;
    --lh-body: 1.5;
    --step-display: 2.25rem; /* 36 px */
  }
}