/* ==========================================================================
   VHSD Solutions - design tokens
   Single source of truth for colour, type and spacing on the web.
   Import this first, then style everything through the custom properties.
   Contrast ratios in the comments are measured, not estimated.
   ========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --vh-rust:   #9C3A07;   /* VH half of the mark. 6.95:1 on white - AA for text */
  --vh-ember:  #DE560A;   /* the keystone. 3.86:1 on white - LARGE TEXT ONLY   */
  --vh-flare:  #F98E3D;   /* SD half.      2.34:1 on white - NEVER for text    */
  --vh-slate:  #4A5764;   /* "SOLUTIONS", body copy. 7.40:1 on white          */
  --vh-ink:    #161A1F;   /* graphite ground. Not pure black.                  */

  /* ---- semantic: light theme ------------------------------------------ */
  --bg:            #F4F5F6;  /* page. Cool-biased so orange stays the only warm note */
  --surface:       #FFFFFF;
  --surface-sunk:  #E9ECEE;
  --text:          #161A1F;
  --text-muted:    #4A5764;
  --text-faint:    #7C8894;  /* 3.62:1 - captions and labels only, never body */
  --border:        #D2D7DC;
  --border-strong: #B9C0C7;

  --accent:        #DE560A;  /* display, rules, marks - NOT small text        */
  --accent-text:   #9C3A07;  /* the accent when it must carry readable text   */
  --accent-quiet:  #F98E3D;  /* fills and decoration only                     */

  /* Interactive. rust + white passes AA (6.95:1); ember + white does NOT.   */
  --action-bg:       #9C3A07;
  --action-fg:       #FFFFFF;
  --action-bg-hover: #7E2F06;
  --focus-ring:      #DE560A;

  --good: #1F7A4D;
  --warn: #B45309;
  --crit: #B3261E;

  /* ---- type ----------------------------------------------------------- */
  /* IBM Plex - SIL OFL, self-host it. Engineered feel, matches the mark.    */
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Modular scale, ratio 1.25, base 16px */
  --t-xs:   0.75rem;   /* 12 - labels, table meta            */
  --t-sm:   0.875rem;  /* 14 - captions, dense UI            */
  --t-base: 1rem;      /* 16 - body                          */
  --t-md:   1.25rem;   /* 20 - lead paragraph                */
  --t-lg:   1.5625rem; /* 25 - h3                            */
  --t-xl:   1.953rem;  /* 31 - h2                            */
  --t-2xl:  2.441rem;  /* 39 - h1                            */
  --t-3xl:  3.815rem;  /* 61 - hero                          */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;

  --track-label: 0.14em;  /* uppercase mono labels */
  --track-head:  0.01em;
  --track-logo:  0.42em;  /* the "SOLUTIONS" lockup tracking - display only */

  /* ---- space (4px base) ----------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --measure: 65ch;          /* max width for running text */
  --radius: 2px;            /* near-square. The brand is masonry, not bubbles */
  --rule: 1px;
  --rule-strong: 2px;
}

/* ---- dark theme --------------------------------------------------------
   The deep tones go muddy on a dark ground; these are retuned, not inverted. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #101318;
    --surface:       #191E25;
    --surface-sunk:  #0B0E12;
    --text:          #E7EAEE;
    --text-muted:    #9DAAB7;   /* 7.38:1 on --bg */
    --text-faint:    #6F7C89;
    --border:        #29313A;
    --border-strong: #3A444F;

    --accent:        #FF7A2E;   /* 6.72:1 on --bg - AA for normal text here */
    --accent-text:   #FF7A2E;
    --accent-quiet:  #FFB067;

    --action-bg:       #D9540C;
    --action-fg:       #FFFFFF;
    --action-bg-hover: #FF7A2E;
    --focus-ring:      #FF7A2E;

    --good: #4ADE80;
    --warn: #FBBF24;
    --crit: #F87171;
  }
}

/* The viewer's explicit toggle must beat the OS preference in both directions. */
:root[data-theme="dark"] {
  --bg: #101318; --surface: #191E25; --surface-sunk: #0B0E12;
  --text: #E7EAEE; --text-muted: #9DAAB7; --text-faint: #6F7C89;
  --border: #29313A; --border-strong: #3A444F;
  --accent: #FF7A2E; --accent-text: #FF7A2E; --accent-quiet: #FFB067;
  --action-bg: #D9540C; --action-fg: #FFFFFF; --action-bg-hover: #FF7A2E;
  --focus-ring: #FF7A2E;
  --good: #4ADE80; --warn: #FBBF24; --crit: #F87171;
}
:root[data-theme="light"] {
  --bg: #F4F5F6; --surface: #FFFFFF; --surface-sunk: #E9ECEE;
  --text: #161A1F; --text-muted: #4A5764; --text-faint: #7C8894;
  --border: #D2D7DC; --border-strong: #B9C0C7;
  --accent: #DE560A; --accent-text: #9C3A07; --accent-quiet: #F98E3D;
  --action-bg: #9C3A07; --action-fg: #FFFFFF; --action-bg-hover: #7E2F06;
  --focus-ring: #DE560A;
  --good: #1F7A4D; --warn: #B45309; --crit: #B3261E;
}

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0; max-width: var(--measure); }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The eyebrow/label treatment used throughout. Mono, uppercase, tracked. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Numbers in columns must line up. */
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}