/* Provelis design tokens | v1.0, 2 Sep 2026
 *
 * The single source of truth for colour, type, spacing and shape. The design
 * work and the hand-built static site both use this file, so the two cannot
 * drift. Every contrast ratio in the comments is measured, not estimated.
 *
 * Derived from Provelis/brand/README.md v2.0 and design-system.md v1.0.
 */

:root {
  /* ---- Colour: grounds ------------------------------------------------ */
  --paper:            #FFFFFF;
  --wash:             #F7F7F5;   /* alternating sections */
  --ink:              #1F2A33;   /* the dark ground, and body text */

  /* ---- Colour: type --------------------------------------------------- */
  --text:             #1F2A33;   /* 14.61:1 on paper */
  --text-muted:       #4A555F;   /* 7.62:1 on paper. Captions, meta, labels */
  --text-on-ink:      #FFFFFF;   /* 14.61:1 on ink */
  --text-muted-on-ink:#B9C2C9;   /* secondary text on the dark ground */

  /* ---- Colour: accent -------------------------------------------------
   * Crimson is a LIGHT-GROUND colour. On ink it drops to 2.23:1, so on dark
   * it may only appear as a large solid shape, never as text or a thin rule.
   * --crimson-on-ink is the lifted variant for dark grounds, and it must never
   * be used on paper, where it is 4.13:1 and fails AA for body text.
   */
  --crimson:          #A83246;   /* 6.54:1 on paper, 6.10:1 on wash */
  --crimson-on-ink:   #D05266;   /* 3.54:1 on ink. Dark grounds only */
  --crimson-hover:    #8E2A3B;
  --crimson-wash:     #FBF2F4;   /* tint for callout grounds */

  /* ---- Colour: lines and shapes --------------------------------------- */
  --rule:             #E4E4E0;   /* 1px rules and table borders on light */
  --rule-strong:      #C9CBC6;
  /* For large numerals and other quiet display type. 3.48:1 on wash and
   * 3.74:1 on paper, so it passes AA as large text. --rule-strong is a LINE
   * colour at 1.52:1 and must never be used for type. */
  --text-quiet:       #7E858C;
  --rule-on-ink:      #3A4750;

  /* ---- Colour: status -------------------------------------------------
   * Deliberately NOT a red. A true alarm red sits at almost exactly crimson's
   * hue and contrast and would be read as the brand colour. Severity is shown
   * by a LABEL and a chip style first; colour is only ever a second cue, so
   * nothing depends on colour alone.
   */
  --caution:          #8A5A00;   /* 5.93:1 on paper */
  --ok:               #17663A;   /* 7.00:1 on paper */
  --critical:         #1F2A33;   /* solid ink chip with a written label */

  /* ---- Type ------------------------------------------------------------
   * Inter throughout. Headings sit at 620, the weight the logo wordmark is set
   * in, which ties the type back to the mark.
   */
  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-heading: 620;

  --text-display:  clamp(2.25rem, 1.6rem + 2.6vw, 3rem);      /* 36 to 48 */
  --text-h1:       clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);  /* 28 to 36 */
  --text-h2:       clamp(1.5rem, 1.28rem + 0.9vw, 1.75rem);   /* 24 to 28 */
  --text-h3:       1.375rem;                                   /* 22 */
  --text-lead:     clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem); /* 18 to 20 */
  --text-body:     1.0625rem;                                  /* 17 */
  --text-small:    0.9375rem;                                  /* 15 */
  --text-caption:  0.8125rem;                                  /* 13 */
  --text-overline: 0.8125rem;                                  /* 13, uppercase */

  --leading-tight: 1.12;
  --leading-snug:  1.25;
  --leading-body:  1.65;
  --tracking-tight: -0.02em;
  --tracking-overline: 0.12em;

  --measure: 68ch;        /* prose line length. Never wider */

  /* ---- Spacing: a 4px scale ------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(3rem, 2rem + 5vw, 6rem);   /* vertical rhythm between sections */

  /* ---- Shape -----------------------------------------------------------
   * 8 px on every artefact: cards, images, panels, buttons and fields
   * (Gerrit, 2 September 2026). Enough to read as considered rather than
   * severe, and still short of the soft-cornered SaaS look.
   */
  --radius: 8px;
  --radius-lg: 12px;
  --border: 1px;

  /* ---- Layout ---------------------------------------------------------- */
  --page-max: 1200px;
  --prose-max: 46rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Motion and focus ------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration: 150ms;
  --focus-ring: 2px solid var(--crimson);
  --focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}

/* On the ink ground, swap the tokens rather than overriding every rule. */
.on-ink {
  --text: var(--text-on-ink);
  --text-muted: var(--text-muted-on-ink);
  --crimson: var(--crimson-on-ink);
  --rule: var(--rule-on-ink);
  background: var(--ink);
  color: var(--text);
}