/* =========================================================================
   Habile Capital — Design Tokens
   =========================================================================
   Source of truth for every visual value used in a Habile Capital artefact.
   Change a token here → every template that imports this file updates.

   Import into any HTML artefact:
     <link rel="stylesheet" href="path/to/_tokens.css">
   or copy the :root block into the artefact's own <style>.

   Every token below is annotated with its role. Never hard-code a hex, a
   spacing value, a radius, a shadow, or a font-family in a template — bind
   to a token. If a value doesn't exist as a token, add it here first.

   Version: 1.4.0 - 2026-09-21 (--hc-fc-hatch / --fc-hatch: the forecast hatch of the scenario
   notation moved here from the two deck engines, which keep a literal fallback because they are
   single offline files. Change the token first, then the engine copies.)
   1.3.1 - 2026-09-20 (scenario colours confirmed as a health use: downside red, upside green.)
   1.3.0 - 2026-09-20 (red / amber / green reserved for health: good / monitor / risk.
   Scenario, categorical and diverging palettes rebuilt from the brand blues and neutrals.)
   1.2.0 - 2026-09-20 (house style v2.1: modern look, generated-page tells removed.
   Small consistent radii, no elevation, no tracked-caps labels. See house-style.md.)
   Anchor: Habile Capital primary blue #1A2591 (sampled from the master
   logo file at G:\Shared drives\Habile Group\OneDrive-archive\2 - Branding\
   Habile Capital.png).
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------------
     1. PRIMARY — Habile Capital blue ramp
     -----------------------------------------------------------------------
     Anchor is --hc-blue-500 (#1A2591), the logo colour. Ramp extends both
     directions for UI states (hover, active, tint, border, background).
     Hue held constant at ~232°; saturation + lightness vary.
     ----------------------------------------------------------------------- */
  --hc-blue-50:  #F0F2FA;   /* softest wash — table stripe, hover surface */
  --hc-blue-100: #D9DEF0;   /* tint — chip background, subtle callout */
  --hc-blue-200: #B0BAE0;   /* light — disabled state, muted border */
  --hc-blue-300: #8290CE;   /* mid-light — decorative accent */
  --hc-blue-400: #4A5AB5;   /* mid — dark-mode primary substitute */
  --hc-blue-500: #1A2591;   /* ANCHOR — the logo blue, primary brand mark */
  --hc-blue-600: #151E77;   /* hover on primary buttons */
  --hc-blue-700: #10175C;   /* active/pressed state */
  --hc-blue-800: #0B1042;   /* deep — headline over primary tints */
  --hc-blue-900: #06082A;   /* near-black navy — reserved */

  /* -----------------------------------------------------------------------
     2. NEUTRALS — the workhorse ramp
     -----------------------------------------------------------------------
     The interface is 80%+ neutrals. Body copy, borders, panels, backgrounds.
     Cool-leaning to sit under the primary blue without clashing.
     ----------------------------------------------------------------------- */
  --hc-neutral-0:   #FFFFFF;   /* pure white — panel surface */
  --hc-neutral-50:  #F5F7FA;   /* PAPER — body background */
  --hc-neutral-100: #E8ECF2;   /* soft divider, table stripe */
  --hc-neutral-200: #D4DAE3;   /* border-strong, form outline */
  --hc-neutral-300: #B8C0CC;   /* muted line, axis, disabled text */
  --hc-neutral-400: #8B94A3;   /* muted text, placeholder */
  --hc-neutral-500: #5F6875;   /* secondary text */
  --hc-neutral-600: #444B57;   /* body text on paper (AA on --paper) */
  --hc-neutral-700: #2E333C;   /* strong text */
  --hc-neutral-800: #1B1F26;   /* headline — near-INK */
  --hc-neutral-900: #0F1621;   /* INK — deepest text/on-brand dark */

  /* -----------------------------------------------------------------------
     3. SEMANTIC ALIASES
     -----------------------------------------------------------------------
     Bind UI code to these, never to a raw ramp token. Rethemes stay safe.
     ----------------------------------------------------------------------- */
  --ink:          var(--hc-neutral-900);   /* primary text */
  --paper:        var(--hc-neutral-50);    /* body background */
  --panel:        var(--hc-neutral-0);     /* card/panel surface */
  --line:         var(--hc-neutral-100);   /* subtle divider */
  --line-strong:  var(--hc-neutral-200);   /* structural border */
  --muted:        var(--hc-neutral-500);   /* secondary text, labels */
  --accent:       var(--hc-blue-500);      /* primary brand accent */
  --accent-soft:  var(--hc-blue-50);       /* accent tint background */
  --accent-hover: var(--hc-blue-600);      /* interactive hover */
  --accent-deep:  var(--hc-blue-800);      /* topbar / chrome dark */
  --on-accent:    var(--hc-neutral-0);     /* text on --accent */

  /* HEALTH (RAG) - RESERVED. Green, amber and red mean good / monitor / risk and nothing else:
     status tags, harvey balls, the risk matrix, covenant or integrity breaches, threshold heat
     scales. They are never a series colour, never the colour of a positive or negative number,
     never decoration. A value that is merely negative is printed in ink with a minus sign. */
  --pos:      #1E7A44;   /* good */
  --pos-soft: #E1F1E7;
  --neg:      #B23A3A;   /* risk / breach / error */
  --neg-soft: #F6E1E1;
  --warn:     #A97400;   /* monitor / caution */
  --warn-soft:#FBEFCF;
  --info:     var(--hc-blue-500);
  --info-soft:var(--hc-blue-50);
  /* Health heat scale (sensitivity tables shaded against absolute thresholds). Light, ink text. */
  --h-pos-1:#E4F3E9; --h-pos-2:#C2E3CE; --h-pos-3:#97D0AC;
  --h-neg-1:#FBE6E1; --h-neg-2:#F6CFC8; --h-neg-3:#EDAFA5;

  /* -----------------------------------------------------------------------
     4. DATA-VIZ ROLES
     -----------------------------------------------------------------------
     Separate from semantic. Bound to chart series, not to UI state.
     Ordered and validated for CVD-safety (deuteranopia / protanopia /
     tritanopia / grayscale). Do not reorder — order carries meaning.
     ----------------------------------------------------------------------- */

  /* Scenarios: down / base / up. A case IS a statement of health / performance, so it carries the
     health colours: downside = risk red, base = brand blue, upside = good green (Jase, 2026-09-20).
     Blue sits between them, so red and green are never adjacent. Direct-label every line. */
  --s-down: #B23A3A;
  --s-base: #1A2591;
  --s-up:   #1E7A44;

  /* Scenario notation (IBCS 1.2; house style v2.6 §7). Actual is a solid fill, plan is an
     outline, forecast is an outline with a diagonal hatch — all in the primary blue. It marks a
     TIME BASIS, never health, so red / amber / green never appear in it. The hatch is an inline
     SVG data URI and not a CSS gradient on purpose: the rendered-page audit fails a gradient, and
     a data URI draws the same mark without one. The two deck engines are single offline files
     that import nothing, so each keeps this exact value as a fallback inside its own :root —
     change it here first, then the two copies. */
  --hc-fc-hatch: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1,1 L1,-1 M0,6 L6,0 M5,7 L7,5' stroke='%231A2591' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
  --fc-hatch: var(--hc-fc-hatch);

  /* Categorical (up to 6 series). Ordered so adjacent pairs pass a ΔE≥6
     check on the --panel surface. Use in the listed order. */
  --viz-1: #1A2591;  /* primary blue */
  --viz-2: #8290CE;  /* light blue */
  --viz-3: #0B1042;  /* deep navy */
  --viz-4: #7A8594;  /* slate */
  --viz-5: #4A5AB5;  /* mid blue */
  --viz-6: #C3CAD5;  /* pale neutral - the "other/misc" bucket */
  /* No orange, gold, green or red here: they read as amber / green / red and are reserved for health. */

  /* Diverging (waterfalls, above / below a reference). Blue -> neutral -> slate. A step that
     reduces value is slate, not red. For good / monitor / risk shading use --h-* above. */
  --d-neg-3: #6B7686;
  --d-neg-2: #A9B1BD;
  --d-neg-1: #DDE1E7;
  --d-mid:   #EFEEEA;
  --d-pos-1: #C4CAE8;
  --d-pos-2: #5D6DBA;
  --d-pos-3: #1A2591;

  /* Sequential (single-hue ordered ramp — e.g. concentration heatmap). */
  --seq-1: #F0F2FA;
  --seq-2: #C4CAE8;
  --seq-3: #8290CE;
  --seq-4: #4A5AB5;
  --seq-5: #1A2591;

  /* Chart infrastructure */
  --viz-surface: var(--panel);
  --viz-grid:    #E9EBEF;
  --viz-axis:    var(--hc-neutral-300);
  --viz-total:   var(--hc-neutral-300);   /* waterfall start/end bars */

  /* -----------------------------------------------------------------------
     5. TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:  'Source Serif Pro', 'Charter', Georgia, 'Times New Roman', serif;
  --font-mono:   'SF Mono', ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* DOCUMENT type - for anything a counterparty reads (decks, teasers, letters, memos).
     A chosen, installed stack so documents open offline and look the same everywhere: the
     platform UI grotesque, display cut for titles, text cut for body, data and tables.
     --font-mono is for code only. It is never a label face, and labels are never uppercase-tracked:
     that combination is the signature of a generated web page, not of a firm's document. */
  --font-doc-title: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-doc-body:  'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — 1.2 modular. 8 steps.
     Use --fs-body for body, --fs-h1/h2/h3 for hierarchy.
     Everything else is exceptional. */
  --fs-caption: 12px;
  --fs-small:   13px;
  --fs-body:    15px;
  --fs-lead:    17px;
  --fs-h3:      20px;
  --fs-h2:      24px;
  --fs-h1:      32px;
  --fs-display: 44px;

  /* Weights — 3 only. Skip 300 and 900. */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-height */
  --lh-tight: 1.2;      /* headlines */
  --lh-body:  1.55;     /* body copy */
  --lh-num:   1.0;      /* tables of numbers */

  /* Tracking */
  --tr-tight:   -0.01em;   /* display */
  --tr-normal:  0;
  --tr-caps:    0;         /* was 0.06em. Letter-spaced uppercase labels are retired (house style v2) */

  /* -----------------------------------------------------------------------
     6. SPACING SCALE — every margin/padding must be a token
     ----------------------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* -----------------------------------------------------------------------
     7. RADIUS SCALE
     ----------------------------------------------------------------------- */
  /* House style v2.1: small, consistent radii. One large radius on everything is a generated-page
     fingerprint; so is a pill. Containers 4px, hero panels 6px, tags 3px. */
  --radius-0:    0;      /* hard edge */
  --radius-1:    3px;    /* tag, chip, small control */
  --radius-2:    4px;    /* button, input */
  --radius-3:    4px;    /* card, panel, slide element */
  --radius-4:    6px;    /* modal, hero panel */
  --radius-pill: 3px;    /* pills are retired: a status is a rectangular tag with a square marker */

  /* -----------------------------------------------------------------------
     8. ELEVATION — 3 levels only
     ----------------------------------------------------------------------- */
  /* House style v2: no drop shadows. Separation comes from a hairline rule or white space.
     Names retained so templates that reference them render flat. */
  --elev-0: none;
  --elev-1: none;
  --elev-2: none;

  /* -----------------------------------------------------------------------
     9. LAYOUT — container widths + gutters
     ----------------------------------------------------------------------- */
  --container-narrow: 720px;    /* prose */
  --container-mid:    960px;    /* memo */
  --container-wide:   1120px;   /* deck, dashboard */
  --gutter-page:      24px;
  --grid-gutter:      24px;

  /* -----------------------------------------------------------------------
     10. MOTION — subtle, print-safe
     ----------------------------------------------------------------------- */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   380ms;
  --ease-out:   cubic-bezier(.22, .75, .28, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --ease-in-out:cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   DARK MODE — companion palette
   =========================================================================
   Guarded so a light-mode override on <html> (data-theme="light") wins.
   Neutrals invert asymmetrically; primary shifts up one lightness step so
   it clears WCAG AA on the dark surface.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:          var(--hc-neutral-50);
    --paper:        var(--hc-neutral-900);
    --panel:        var(--hc-neutral-800);
    --line:         var(--hc-neutral-700);
    --line-strong:  var(--hc-neutral-600);
    --muted:        var(--hc-neutral-400);
    --accent:       var(--hc-blue-400);       /* lighter for contrast on dark */
    --accent-soft:  rgba(74, 90, 181, 0.15);
    --accent-hover: var(--hc-blue-300);
    --accent-deep:  var(--hc-blue-800);
    --on-accent:    var(--hc-neutral-900);

    --viz-surface:  var(--hc-neutral-800);
    --viz-grid:     #262A32;
    --viz-axis:     var(--hc-neutral-500);

    --viz-1: #4A5AB5;
    --viz-2: #F09550;
    --viz-3: #6EBF9A;
    --viz-4: #B085C0;
    --viz-5: #DDBB6E;
    --viz-6: #8B94A3;
  }
}
:root[data-theme="dark"] {
  --ink:          var(--hc-neutral-50);
  --paper:        var(--hc-neutral-900);
  --panel:        var(--hc-neutral-800);
  --line:         var(--hc-neutral-700);
  --line-strong:  var(--hc-neutral-600);
  --muted:        var(--hc-neutral-400);
  --accent:       var(--hc-blue-400);
  --accent-soft:  rgba(74, 90, 181, 0.15);
  --accent-hover: var(--hc-blue-300);
  --accent-deep:  var(--hc-blue-800);
  --on-accent:    var(--hc-neutral-900);

  --viz-surface:  var(--hc-neutral-800);
  --viz-grid:     #262A32;
  --viz-axis:     var(--hc-neutral-500);
}

/* =========================================================================
   BASE HELPERS — thin. This file is tokens, not a stylesheet.
   ========================================================================= */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;   /* non-negotiable for finance */
  -webkit-font-smoothing: antialiased;
}