/* Company TuneUp — design tokens
 *
 * Hex values and the type scale are taken from docs/companytuneup-onepager.html,
 * which is the canonical source. The NAMES are ours: the one-pager names colours
 * by appearance (--navy, --bg, --line) and this system names them by role, so a
 * palette change is an edit here rather than a search for every place a colour
 * was used for a reason its name did not record.
 *
 * TWO TIERS, and the distinction is load-bearing:
 *
 *   --ct-c-*    primitives. The raw ramp. NOT for use in page CSS.
 *   everything else  roles. This is what pages use.
 *
 * A page that reaches for a primitive has named a colour by how it looks, which
 * is the thing this file exists to stop. If no role fits, the missing thing is a
 * role, not permission to use the primitive.
 */

:root {
  /* ---- Tier 1: primitives. Do not use directly. ------------------------- */

  /* Slate ramp, complete at 100/200/300/400/500/700.
   * 300 is #CBD5E1. An earlier brief gave #CBDE51 — a transposition, resolved
   * against the one-pager, which uses #CBD5E1 in both places it appears. If you
   * find #CBDE51 anywhere in this repo it is that error, not a second colour. */
  --ct-c-slate-100: #F5F7FA;
  --ct-c-slate-200: #E2E8F0;
  --ct-c-slate-300: #CBD5E1;
  --ct-c-slate-400: #94A3B8;
  --ct-c-slate-500: #64748B;
  --ct-c-slate-700: #334155;

  --ct-c-deep:      #0B1D2D;
  --ct-c-blue:      #1E4FA3;
  --ct-c-teal:      #00A3A3;
  --ct-c-green:     #33B24A;

  /* #7FD3E8 is deliberately NOT here.
   * It exists only as --ct-accent-on-inverse below, because it is legible on the
   * deep ground and effectively disappears on white. A primitive would let
   * someone reach for it on a light surface and get an invisible element that
   * looks fine to whoever picked it. The role name is the guard rail. */

  /* #8F98A3 is also not here. It is the print sheet's page surround — the grey
   * behind the paper — and is not a colour of this site. */

  /* ---- Tier 2: roles. Use these. ---------------------------------------- */

  /* Surfaces */
  --ct-surface:         var(--ct-c-slate-100);
  --ct-surface-raised:  #FFFFFF;
  --ct-surface-inverse: var(--ct-c-deep);
  --ct-border:          var(--ct-c-slate-200);

  /* Text on light surfaces */
  --ct-text-strong: var(--ct-c-deep);
  --ct-text:        var(--ct-c-slate-700);
  --ct-text-muted:  var(--ct-c-slate-500);

  /* Text on the inverse surface */
  --ct-text-inverse:        #FFFFFF;
  --ct-text-inverse-muted:  var(--ct-c-slate-300);
  --ct-text-inverse-subtle: var(--ct-c-slate-400);

  /* Accents */
  --ct-accent-primary:    var(--ct-c-blue);   /* emphasis, links, the paid tier */
  --ct-accent-secondary:  var(--ct-c-teal);   /* enumerators, list markers */
  --ct-accent-positive:   var(--ct-c-green);  /* the mark, the free tier, the Strong band */
  --ct-accent-on-inverse: #7FD3E8;            /* on the deep ground ONLY */

  /* ---- Type ------------------------------------------------------------- */

  --ct-font-display: 'Montserrat', system-ui, sans-serif;
  --ct-font-text:    'Source Sans 3', system-ui, sans-serif;

  --ct-weight-light:    300;
  --ct-weight-regular:  400;
  --ct-weight-medium:   500;
  --ct-weight-semibold: 600;
  --ct-weight-bold:     700;

  /* Scale, from the one-pager. Named for what each step does, not its size,
   * so a scale change does not leave every rule referring to an old number. */
  --ct-size-wordmark: 34px;
  --ct-size-hook:     20px;
  --ct-size-lead:     15px;
  --ct-size-body:     14.5px;
  --ct-size-body-sm:  13px;
  --ct-size-ui:       12.5px;
  --ct-size-meta:     11.5px;
  --ct-size-label:    11px;
  --ct-size-micro:    10.5px;

  --ct-track-descriptor: 2.4px;
  --ct-track-section:    1.8px;
  --ct-track-step:       1.4px;
  --ct-track-micro:      1.2px;
}

/* ---- Fonts: self-hosted, no runtime third-party request ------------------
 *
 * Both are variable fonts covering the whole weight axis, so one file per family
 * serves every weight above. font-display: swap because a marketing page that
 * shows nothing while a font loads has chosen invisible text over unstyled text.
 * tools/check-assets.py fails the build on any fonts.googleapis.com or
 * fonts.gstatic.com reference under public/. */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Score bands ---------------------------------------------------------
 *
 * Thresholds and labels are NOT here. They live in
 * public/assets/vendor/score-bands.js, the single source both free tools read,
 * pending layer8-business-health#9. Duplicating them into CSS would create a
 * second source that drifts.
 *
 * The COLOURS are here, and they are a DELIBERATE PALETTE EXTENSION.
 *
 * The brand was handed over closed: navy, blue, teal, green, a slate ramp and
 * one on-navy accent. It carries no warning hue, and a four-band severity scale
 * needs one. Two amber intensities were added to close that gap.
 *
 * These are REVISABLE. The ruling was "continue and we can alter later", which
 * is not the same as settled — treat the values as a working decision with the
 * reasoning attached, not as brand law.
 *
 * Rejected, with reasons, so neither is re-proposed as an improvement:
 *
 *   Reusing the slate ramp for the lower bands. The ramp has no bad end — it
 *   runs light to dark, not fine to broken. Priority rendered in slate-700 says
 *   "de-emphasised", which is the opposite of what the band means.
 *
 *   Taking the colours from the gauge arcs. The mark sweeps green, teal, blue,
 *   on-navy accent: four things in a row that are not these four things. One is
 *   a decorative sweep, the other is a scale. Mapping between them invents a
 *   meaning neither carries.
 *
 * Blue is deliberately NOT in the band scale. It already carries links and the
 * paid tier, and a colour meaning two things is the same defect as collapsing
 * three absences behind one dash — arriving in the visual layer instead of the
 * data layer.
 *
 * MEASURED, not picked-then-tested. Contrast against #FFFFFF / --ct-surface:
 *
 *   Strong     #33B24A   2.76 / 2.57      (pre-existing)
 *   Watch      #00A3A3   3.10 / 2.89      (pre-existing)
 *   Attention  #B0791C   3.75 / 3.50      clears 3:1 non-text
 *   Priority   #8A4F14   6.54 / 6.10      clears 4.5:1, safe as text
 *
 * Muted rather than saturated, on purpose: the positioning is
 * findings-with-evidence, and a red-alert scorecard would fight the copy on
 * every page. For scale, a saturated amber (#FFBF00) manages 1.65:1 on white —
 * it is both louder and less legible, which is the usual trade nobody measures.
 *
 * KNOWN LIMIT — luminance separation is poor ACROSS THE WHOLE SCALE, and this
 * is not introduced by the ambers:
 *
 *   Strong vs Watch      1.12:1     <- both pre-existing
 *   Watch vs Attention   1.21:1
 *   Attention vs Priority 1.74:1
 *
 * The bands are distinguished by HUE, not by lightness. In greyscale, or to a
 * viewer with a red-green deficiency, adjacent bands are close to
 * indistinguishable. THE BAND LABEL MUST THEREFORE ALWAYS ACCOMPANY THE COLOUR
 * — colour is reinforcement here and never the carrier. Card 27 should verify
 * that rather than treating the swatches as sufficient.
 *
 * Bands render on light surfaces. On the inverse ground Priority manages only
 * 2.61:1; if a band ever needs to appear on navy it needs its own treatment. */

:root {
  --ct-band-strong:    var(--ct-c-green);
  --ct-band-watch:     var(--ct-c-teal);
  --ct-band-attention: #B0791C;
  --ct-band-priority:  #8A4F14;

/* ---- Focus -------------------------------------------------------------
 *
 * Card 27 requires a visible focus indicator on every interactive element.
 * Defined here so that card 5 has a token to reach for; without one it would be
 * invented as a raw value inside a page stylesheet, which check-assets.py would
 * then report as a defect rather than having prevented.
 *
 * TWO tokens, because one value cannot serve both grounds. WCAG 1.4.11 wants
 * 3:1 against the adjacent colour, and measured:
 *
 *   blue on white  7.77:1     blue on navy            2.20:1   <- fails
 *   accent on navy 10.09:1    accent on white         1.70:1   <- fails badly
 *
 * A single ring token would therefore be invisible on exactly one of the two
 * surfaces the site actually uses. */

  --ct-focus-ring:         var(--ct-c-blue);
  --ct-focus-ring-inverse: var(--ct-accent-on-inverse);
  --ct-focus-ring-width:   2px;
  --ct-focus-ring-offset:  2px;
}