:root {
  /* Raw palette references */
  --wf-ref-bg-dark: #0B1220;
  --wf-ref-bg-light: #F8FAFC;
  --wf-ref-ink-dark: #FFFFFF;
  --wf-ref-ink-light: #0B1220;

  --wf-ref-accent-mint: #34D399;
  --wf-ref-accent-emerald: #047857;
  --wf-ref-accent-emerald-dark: #10B981;
  --wf-ref-accent-teal: #0D9488;
  --wf-ref-accent-indigo: #4F46E5;
  --wf-ref-accent-amber: #F59E0B;
  --wf-ref-accent-rose: #E11D48;

  --wf-ref-line-light: #E5E7EB;
  --wf-ref-line-dark: #1F2937;

  /* Semantic colors */
  --wf-color-background-canvas: #F8FAFC;
  --wf-color-background-surface: #FFFFFF;
  --wf-color-background-surface-subtle: #F1F5F9;
  --wf-color-background-inverse: #0B1220;

  --wf-color-text-primary: #0B1220;
  --wf-color-text-secondary: #334155;
  --wf-color-text-muted: #475569;
  --wf-color-text-inverse: #FFFFFF;

  --wf-color-border-default: #E5E7EB;
  --wf-color-border-strong: #CBD5E1;

  --wf-color-action-primary-bg: #047857;
  --wf-color-action-primary-text: #FFFFFF;
  --wf-color-action-primary-border: #047857;

  --wf-color-action-secondary-bg: #ECFDF5;
  --wf-color-action-secondary-text: #065F46;
  --wf-color-action-secondary-border: #A7F3D0;

  --wf-color-action-ghost-text: #4F46E5;

  --wf-color-action-destructive-bg: #E11D48;
  --wf-color-action-destructive-text: #FFFFFF;

  --wf-color-status-success-bg: #ECFDF5;
  --wf-color-status-success-text: #065F46;
  --wf-color-status-success-border: #A7F3D0;

  --wf-color-status-warning-bg: #FFFBEB;
  --wf-color-status-warning-text: #92400E;
  --wf-color-status-warning-border: #FCD34D;

  --wf-color-status-error-bg: #FFF1F2;
  --wf-color-status-error-text: #9F1239;
  --wf-color-status-error-border: #FDA4AF;

  --wf-color-status-info-bg: #EEF2FF;
  --wf-color-status-info-text: #3730A3;
  --wf-color-status-info-border: #C7D2FE;

  /* Verdict tones. Outcome chips need a caution step between "this worked"
     and "this failed"; without one, a negative verdict ships in success green.
     Aliases of the status tones so the two families cannot drift. */
  --wf-color-verdict-positive-bg: var(--wf-color-status-success-bg);
  --wf-color-verdict-positive-text: var(--wf-color-status-success-text);
  --wf-color-verdict-positive-border: var(--wf-color-status-success-border);

  --wf-color-verdict-caution-bg: var(--wf-color-status-warning-bg);
  --wf-color-verdict-caution-text: var(--wf-color-status-warning-text);
  --wf-color-verdict-caution-border: var(--wf-color-status-warning-border);

  --wf-color-verdict-negative-bg: var(--wf-color-status-error-bg);
  --wf-color-verdict-negative-text: var(--wf-color-status-error-text);
  --wf-color-verdict-negative-border: var(--wf-color-status-error-border);

  /* Brand-green focus ring (9.6:1 on white, 7.8:1 on the mint secondary
     surface). Box-shadow rings pair it with the contrast colour below so the
     indicator still separates from the green primary button it sits on. */
  --wf-color-focus-ring: #065F46;
  --wf-color-focus-ring-contrast: #FFFFFF;
  --wf-color-overlay-scrim: rgba(11, 18, 32, 0.56);

  /* Typography */
  --wf-font-heading: DM Sans, system-ui, sans-serif;
  --wf-font-body: Inter, system-ui, sans-serif;
  --wf-font-mono: IBM Plex Mono, ui-monospace, SFMono-Regular, monospace;

  --wf-font-display-lg-size: 48px;
  --wf-font-display-lg-line-height: 56px;
  --wf-font-display-lg-weight: 700;

  --wf-font-display-md-size: 40px;
  --wf-font-display-md-line-height: 48px;
  --wf-font-display-md-weight: 700;

  --wf-font-heading-xl-size: 36px;
  --wf-font-heading-xl-line-height: 44px;
  --wf-font-heading-xl-weight: 700;

  --wf-font-heading-lg-size: 28px;
  --wf-font-heading-lg-line-height: 34px;
  --wf-font-heading-lg-weight: 700;

  --wf-font-heading-md-size: 24px;
  --wf-font-heading-md-line-height: 30px;
  --wf-font-heading-md-weight: 700;

  --wf-font-heading-sm-size: 20px;
  --wf-font-heading-sm-line-height: 28px;
  --wf-font-heading-sm-weight: 600;

  /* App title band (W9 / WMA-117 Lane G, owner decision 8 Sep 2026).
     Added because the heading ladder above cannot hold what the app renders.
     Two gaps: heading-lg -> heading-xl is 28 -> 36, a 1.29x jump where every
     other rung steps 1.11-1.20x, and nothing sits between heading-sm (20) and
     heading-md (24). Across apps/ and packages/ the product draws 22px 19
     times, 26px 10 times, 30px 21 times, 32px 5 times and 34px 6 times, in 12
     stylesheets -- page titles, section titles, hero titles, card h2/h3. Those
     are not strays to be rounded onto a rung; there is no rung.

     These are a separate family rather than new heading rungs because they are
     a different role AND a different weight: 800, the app's title weight, not
     the heading ladder's 700/600. `heading-*` is document hierarchy on the
     content pages; `title-*` is a page, section or card title inside the app.
     The two interleave by size, which is the cost of not renaming five live
     tokens. Merge them into one ladder when the app pages are next restyled.

     Sizes and line-heights are the pairs the shell already draws, so a rule
     taking both moves no pixels. */
  --wf-font-title-xl-size: 34px;
  --wf-font-title-xl-line-height: 42px;
  --wf-font-title-xl-weight: 800;

  --wf-font-title-lg-size: 32px;
  --wf-font-title-lg-line-height: 40px;
  --wf-font-title-lg-weight: 800;

  --wf-font-title-md-size: 30px;
  --wf-font-title-md-line-height: 36px;
  --wf-font-title-md-weight: 800;

  --wf-font-title-sm-size: 26px;
  --wf-font-title-sm-line-height: 32px;
  --wf-font-title-sm-weight: 800;

  --wf-font-title-xs-size: 22px;
  --wf-font-title-xs-line-height: 28px;
  --wf-font-title-xs-weight: 800;

  --wf-font-body-lg-size: 18px;
  --wf-font-body-lg-line-height: 28px;
  --wf-font-body-lg-weight: 400;

  --wf-font-body-md-size: 16px;
  --wf-font-body-md-line-height: 24px;
  --wf-font-body-md-weight: 400;

  --wf-font-body-sm-size: 14px;
  --wf-font-body-sm-line-height: 20px;
  --wf-font-body-sm-weight: 400;

  --wf-font-label-md-size: 14px;
  --wf-font-label-md-line-height: 20px;
  --wf-font-label-md-weight: 500;

  --wf-font-label-sm-size: 12px;
  --wf-font-label-sm-line-height: 16px;
  --wf-font-label-sm-weight: 500;

  --wf-font-mono-sm-size: 12px;
  --wf-font-mono-sm-line-height: 16px;
  --wf-font-mono-sm-weight: 400;

  --wf-font-mono-md-size: 14px;
  --wf-font-mono-md-line-height: 20px;
  --wf-font-mono-md-weight: 400;

  /* Spacing */
  --wf-space-0: 0px;
  --wf-space-2: 2px;
  --wf-space-4: 4px;
  --wf-space-6: 6px;
  --wf-space-8: 8px;
  --wf-space-12: 12px;
  --wf-space-16: 16px;
  --wf-space-20: 20px;
  --wf-space-24: 24px;
  --wf-space-32: 32px;
  --wf-space-40: 40px;
  --wf-space-48: 48px;
  --wf-space-64: 64px;

  /* Radius */
  --wf-radius-none: 0px;
  --wf-radius-sm: 8px;
  --wf-radius-md: 12px;
  --wf-radius-lg: 16px;
  --wf-radius-xl: 20px;
  --wf-radius-pill: 9999px;

  /* Shadows */
  --wf-shadow-none: none;
  --wf-shadow-soft: 0 6px 18px rgba(0,0,0,0.08);
  --wf-shadow-md: 0 10px 24px rgba(0,0,0,0.10);
  --wf-shadow-overlay: 0 16px 40px rgba(0,0,0,0.16);

  /* Border widths */
  --wf-border-width-default: 1px;
  --wf-border-width-strong: 2px;

  /* Controls */
  --wf-control-height-sm: 30px;
  --wf-control-height-md: 36px;
  --wf-control-height-lg: 44px;
  --wf-control-height-xl: 48px;
  /* The large primary CTA. Added by W9 Lane G: 52px is drawn 9 times across 5
     stylesheets (the shell's plan CTA and save-ranking, and four chrome and
     scenario rules) and had no rung. `-xl` (48px) is the roomy step below it
     and had zero consumers while 24 rules hardcoded 48 -- it was missing from
     the scenario contract, not from the scale. */
  --wf-control-height-2xl: 52px;

  --wf-control-padding-x-sm: 12px;
  --wf-control-padding-x-md: 16px;
  --wf-control-padding-x-lg: 20px;

  --wf-control-icon-sm: 16px;
  --wf-control-icon-md: 18px;
  --wf-control-icon-lg: 20px;

  /* Target sizes. WCAG 2.2 AA 2.5.8 fails an interactive target whose box is
     under 24px; `target-min` is that floor, named so a test and a stylesheet
     can assert against the same token instead of two copies of a literal.
     `target-comfortable` is what a control a finger operates in a main flow is
     drawn at (2.5.5 AAA, and the owner decision of 7 Sep 2026); it aliases the
     large control height rather than restating 44px so the two cannot drift. */
  --wf-control-target-min: 24px;
  --wf-control-target-comfortable: var(--wf-control-height-lg, 44px);

  /* The smallest type the app is allowed to render. Aliases the smallest step
     of the scale above for the same reason: one 12px in the file, not two. */
  --wf-font-size-min: var(--wf-font-label-sm-size, 12px);
}