/*
  Castway Cloud version 3: design tokens
  Version 0.1, 2026-09-24, proposal for Rudi (V3-D99 step 5).
  Implements Spec/design/STYLEGUIDE.md 0.1. Every value the screens use comes
  from here. A hard coded value in a template or a stylesheet fails the token
  test (11 section 2.1, RQ-L-003).

  Layout of this file
    1. Base scales (neutral, primary, accent, semantic families, bands, charts)
    2. Semantic aliases for light (the tokens components actually use)
    3. State tokens (07 section 3), severities, variance, workspace
    4. Type
    5. Space, size, layout
    6. Radius, border, shadow, focus
    7. Motion
    8. Z index
    9. Density (data-density) and reduced motion
   10. Dark values: under prefers-color-scheme guarded by :root:not([data-theme="light"])
       and again under :root[data-theme="dark"]. The build pins <html data-theme="light">
       until the dark switch of RQ-L-022 exists (UX-39).
   11. The brand layer: which tokens a brand file may redefine (V3-D40)

  Naming: --cw-<group>-<name>. Colours that are text on a fill are named -on-<fill>.
  Soft fills carry their own text token, -soft-text. Ratios in comments are WCAG
  contrast, computed, text on surface unless stated.

  Breakpoints cannot be custom properties. They are, for the Tailwind config:
    phone   < 640px
    tablet  640px to 1023px
    desktop >= 1024px
*/

:root {
  /* ------------------------------------------------------------------ */
  /* 1. Base scales                                                      */
  /* ------------------------------------------------------------------ */

  /* Neutral, a cool grey. Twelve steps. */
  --cw-neutral-0:   #FFFFFF;
  --cw-neutral-50:  #F6F7F9;
  --cw-neutral-100: #EDEFF2;
  --cw-neutral-200: #E6E8EC;
  --cw-neutral-300: #D7DBE0;
  --cw-neutral-400: #B4BAC4;
  --cw-neutral-500: #7C8796;
  --cw-neutral-600: #6B7280;
  --cw-neutral-700: #4B5563;
  --cw-neutral-800: #343A44;
  --cw-neutral-900: #1B1F26;
  --cw-neutral-950: #101215;

  /* Dark surfaces, used only in the dark blocks below, listed here so a brand sees them. */
  --cw-neutral-d-surface:   #15181D;
  --cw-neutral-d-surface-2: #1C2027;
  --cw-neutral-d-surface-3: #242932;

  /* Primary scale (brand layer). Deep blue. */
  --cw-primary-50:  #E8F0FA;
  --cw-primary-100: #D2E3F6;
  --cw-primary-200: #A4C6F0;
  --cw-primary-300: #7FB0EA;
  --cw-primary-400: #4C8AD1;
  --cw-primary-500: #2E6FBF;
  --cw-primary-600: #1F5AA3;
  --cw-primary-700: #17477F;
  --cw-primary-800: #12365F;
  --cw-primary-900: #0D2643;

  /* Accent scale (brand layer). Violet. Notes, presence of the current person, recommended. */
  --cw-accent-50:  #EEEBFA;
  --cw-accent-100: #DCD6F5;
  --cw-accent-200: #C7BDF7;
  --cw-accent-300: #A99BEF;
  --cw-accent-400: #8A79DE;
  --cw-accent-500: #6F5FD1;
  --cw-accent-600: #5B4BC4;
  --cw-accent-700: #4A3BA6;
  --cw-accent-800: #3B2E8F;
  --cw-accent-900: #27224A;

  /* Semantic families (base layer, never rebranded). strong, soft, soft-text, on. */
  --cw-danger-strong:    #B42318;  /* 6.6 on white */
  --cw-danger-soft:      #FCEBE9;
  --cw-danger-soft-text: #8A1C13;  /* 8.1 on danger-soft */
  --cw-danger-on:        #FFFFFF;  /* 6.6 on danger-strong */

  --cw-warning-strong:    #B54708; /* 5.4 on white */
  --cw-warning-soft:      #FEF0E2;
  --cw-warning-soft-text: #7A3005; /* 8.3 on warning-soft */
  --cw-warning-on:        #FFFFFF; /* 5.4 on warning-strong */

  --cw-success-strong:    #1B7A3E; /* 5.4 on white */
  --cw-success-soft:      #E6F4EA;
  --cw-success-soft-text: #0F5A2C; /* 7.3 on success-soft */
  --cw-success-on:        #FFFFFF; /* 5.4 on success-strong */

  --cw-info-strong:    #17477F;    /* 9.4 on white */
  --cw-info-soft:      #E8F0FA;
  --cw-info-soft-text: #12365F;    /* 10.6 on info-soft */
  --cw-info-on:        #FFFFFF;

  /* Municipality bands, eight, fixed by creation order (11 section 3). White text on each is over 5.0. */
  --cw-band-1: #1F5AA3;
  --cw-band-2: #0E7C7B;
  --cw-band-3: #7A3E9D;
  --cw-band-4: #B54708;
  --cw-band-5: #8A1C13;
  --cw-band-6: #2F6B2F;
  --cw-band-7: #5B4BC4;
  --cw-band-8: #6B5A00;
  --cw-band-on: #FFFFFF;
  --cw-band-tint-alpha: 0.06;      /* the context bar tint: color-mix(in srgb, var(--cw-band-n) 6%, var(--cw-color-surface)) */

  /* Chart series, at most six, fixed order (11 section 2.5). Never a semantic colour. */
  --cw-chart-1: #1F5AA3;
  --cw-chart-2: #0E7C7B;
  --cw-chart-3: #B54708;
  --cw-chart-4: #7A3E9D;
  --cw-chart-5: #6B5A00;
  --cw-chart-6: #6B7280;
  --cw-chart-grid: var(--cw-color-border);
  --cw-chart-axis-text: var(--cw-color-text-2);

  /* ------------------------------------------------------------------ */
  /* 2. Semantic aliases, light                                           */
  /* ------------------------------------------------------------------ */

  --cw-color-surface:   var(--cw-neutral-0);
  --cw-color-surface-2: var(--cw-neutral-50);
  --cw-color-surface-3: var(--cw-neutral-100);
  --cw-color-shell:     var(--cw-neutral-50);      /* brand layer may override */
  --cw-color-overlay:   rgba(16, 18, 21, 0.48);    /* behind dialogues */

  --cw-color-text:          var(--cw-neutral-900); /* 16.5 on surface, 14.4 on surface-3 */
  --cw-color-text-2:        var(--cw-neutral-700); /* 7.6 on surface, 6.6 on surface-3 */
  --cw-color-text-3:        var(--cw-neutral-600); /* 4.8 on surface, metadata only, never a figure */
  --cw-color-text-disabled: #9AA3AF;               /* 2.6, exempt as disabled, never the only cue */
  --cw-color-text-inverse:  var(--cw-neutral-0);

  --cw-color-border:        var(--cw-neutral-300); /* structure, decorative */
  --cw-color-border-2:      var(--cw-neutral-200); /* hairlines, sheet gridlines */
  --cw-color-border-strong: var(--cw-neutral-500); /* controls, 3.6 non text on surface */
  --cw-color-border-disabled: var(--cw-neutral-400);

  --cw-color-primary:           var(--cw-primary-600); /* 6.9 on surface */
  --cw-color-primary-strong:    var(--cw-primary-700); /* hover, pressed */
  --cw-color-on-primary:        #FFFFFF;               /* 6.9 on primary */
  --cw-color-primary-soft:      var(--cw-primary-50);  /* selected row and cell */
  --cw-color-primary-soft-text: var(--cw-primary-800); /* 10.6 on primary-soft */

  --cw-color-accent:           var(--cw-accent-600);  /* 6.5 on surface */
  --cw-color-accent-strong:    var(--cw-accent-700);
  --cw-color-on-accent:        #FFFFFF;               /* 6.5 on accent */
  --cw-color-accent-soft:      var(--cw-accent-50);
  --cw-color-accent-soft-text: var(--cw-accent-800);  /* 9.1 on accent-soft */

  --cw-color-link:       var(--cw-primary-600);       /* 6.9 on surface, 6.4 on surface-2 */
  --cw-color-link-hover: var(--cw-primary-700);
  --cw-color-focus:      var(--cw-primary-500);       /* 5.1 non text on surface */

  --cw-color-icon:       var(--cw-neutral-500);       /* icons at rest, 3.6 non text */
  --cw-color-icon-strong: var(--cw-neutral-700);

  /* Semantic aliases the components use */
  --cw-color-danger:            var(--cw-danger-strong);
  --cw-color-danger-soft:       var(--cw-danger-soft);
  --cw-color-danger-soft-text:  var(--cw-danger-soft-text);
  --cw-color-on-danger:         var(--cw-danger-on);
  --cw-color-warning:           var(--cw-warning-strong);
  --cw-color-warning-soft:      var(--cw-warning-soft);
  --cw-color-warning-soft-text: var(--cw-warning-soft-text);
  --cw-color-on-warning:        var(--cw-warning-on);
  --cw-color-success:           var(--cw-success-strong);
  --cw-color-success-soft:      var(--cw-success-soft);
  --cw-color-success-soft-text: var(--cw-success-soft-text);
  --cw-color-on-success:        var(--cw-success-on);
  --cw-color-info:              var(--cw-info-strong);
  --cw-color-info-soft:         var(--cw-info-soft);
  --cw-color-info-soft-text:    var(--cw-info-soft-text);
  --cw-color-on-info:           var(--cw-info-on);

  /* ------------------------------------------------------------------ */
  /* 3. States, severities, variance, workspace                          */
  /* ------------------------------------------------------------------ */

  /* Run states (07 section 3), shared by tasks, batches and jobs. Each state: fill, text, icon colour.
     One word, one colour, one icon (11 principle 7). Icon names in STYLEGUIDE section 2.6. */
  --cw-state-draft:            var(--cw-neutral-100);
  --cw-state-draft-text:       var(--cw-neutral-700);
  --cw-state-queued:           var(--cw-neutral-100);
  --cw-state-queued-text:      var(--cw-neutral-700);
  --cw-state-running:          var(--cw-info-soft);
  --cw-state-running-text:     var(--cw-info-soft-text);
  --cw-state-ready:            var(--cw-success-soft);
  --cw-state-ready-text:       var(--cw-success-soft-text);
  --cw-state-attention:        var(--cw-warning-soft);
  --cw-state-attention-text:   var(--cw-warning-soft-text);
  --cw-state-blocked:          var(--cw-danger-soft);
  --cw-state-blocked-text:     var(--cw-danger-soft-text);
  --cw-state-failed:           var(--cw-danger-soft);
  --cw-state-failed-text:      var(--cw-danger-soft-text);
  --cw-state-in-review:        var(--cw-info-soft);
  --cw-state-in-review-text:   var(--cw-info-soft-text);
  --cw-state-returned:         var(--cw-warning-soft);
  --cw-state-returned-text:    var(--cw-warning-soft-text);
  --cw-state-recommended:      var(--cw-color-accent-soft);
  --cw-state-recommended-text: var(--cw-color-accent-soft-text);
  --cw-state-approved:         var(--cw-success-strong);   /* filled: an outcome */
  --cw-state-approved-text:    var(--cw-success-on);
  --cw-state-superseded:       var(--cw-neutral-100);
  --cw-state-superseded-text:  var(--cw-neutral-700);      /* 6.6 on neutral-100 */
  --cw-state-submitted:        var(--cw-success-strong);   /* filled: the outcome */
  --cw-state-submitted-text:   var(--cw-success-on);
  --cw-state-rejected:         var(--cw-danger-soft);
  --cw-state-rejected-text:    var(--cw-danger-soft-text);
  --cw-state-resubmitted:      var(--cw-success-soft);
  --cw-state-resubmitted-text: var(--cw-success-soft-text);

  /* Severities of findings, checks and signals */
  --cw-severity-blocking:         var(--cw-danger-soft);
  --cw-severity-blocking-text:    var(--cw-danger-soft-text);
  --cw-severity-blocking-icon:    var(--cw-danger-strong);
  --cw-severity-warning:          var(--cw-warning-soft);
  --cw-severity-warning-text:     var(--cw-warning-soft-text);
  --cw-severity-warning-icon:     var(--cw-warning-strong);
  --cw-severity-information:      var(--cw-info-soft);
  --cw-severity-information-text: var(--cw-info-soft-text);
  --cw-severity-information-icon: var(--cw-info-strong);

  /* Variance flags (note 17, 11 section 5). Separate tokens from the semantic families (UX-13). */
  --cw-variance-unfavourable:      #B42318;  /* 6.6 on surface, 6.1 on surface-2 */
  --cw-variance-unfavourable-soft: #FCEBE9;
  --cw-variance-favourable:        #1B7A3E;  /* 5.4 on surface, 5.0 on surface-2 */
  --cw-variance-favourable-soft:   #E6F4EA;
  --cw-variance-neutral:           #6B7280;  /* an unflagged variance, 4.8 */
  --cw-variance-task-marker:       var(--cw-warning-strong); /* a line over the explanation level with no SC1 explanation */

  /* Workspace bands (V3-D5, V3-D23). The test amber is the same in every theme and brand. */
  --cw-workspace-live:        var(--cw-primary-600);
  --cw-workspace-test:        #F59E0B;
  --cw-workspace-test-text:   #1B1F26;    /* 7.7 on the band */
  --cw-workspace-test-border: #B54708;
  /* V3-D186: the side marker, each side's band and its text. */
  --cw-side-advisory:          var(--cw-primary-50);
  --cw-side-advisory-text:     var(--cw-primary-800);   /* 10.6 on the band */
  --cw-side-municipality:      var(--cw-accent-50);
  --cw-side-municipality-text: var(--cw-accent-800);    /* 9.1 on the band */
  --cw-side-platform:          var(--cw-neutral-100);
  --cw-side-platform-text:     var(--cw-neutral-700);   /* 6.6 on the band */

  /* Cell states in the sheet grid (STYLEGUIDE section 7) */
  --cw-cell-hover:          var(--cw-color-surface-2);
  --cw-cell-selected:       var(--cw-color-primary-soft);
  --cw-cell-selected-ring:  var(--cw-color-primary);
  --cw-cell-changed-edge:   var(--cw-info-strong);
  --cw-cell-check-fail-edge: var(--cw-danger-strong);
  --cw-cell-check-warn-edge: var(--cw-warning-strong);
  --cw-cell-note-open:      var(--cw-color-accent);
  --cw-cell-note-answered:  var(--cw-color-text-3);
  --cw-cell-zero:           var(--cw-color-text-3);
  --cw-sheet-header-bg:     var(--cw-color-surface-3);
  --cw-sheet-heading-bg:    var(--cw-color-surface-2);
  --cw-sheet-gridline:      var(--cw-color-border-2);
  --cw-sheet-total-rule:    var(--cw-color-border-strong);
  --cw-sheet-formula-line-bg: var(--cw-color-surface-2);

  /* ------------------------------------------------------------------ */
  /* 4. Type                                                              */
  /* ------------------------------------------------------------------ */

  --cw-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* brand layer may override, must keep tabular figures */
  --cw-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --cw-font-tabular: "tnum" 1, "lnum" 1;   /* apply as font-feature-settings on every figure */
  --cw-font-tabular-variant: tabular-nums lining-nums; /* apply as font-variant-numeric, the preferred property */

  --cw-text-xs:  12px;  --cw-leading-xs:  16px;
  --cw-text-sm:  13px;  --cw-leading-sm:  20px;
  --cw-text-md:  14px;  --cw-leading-md:  20px;
  --cw-text-lg:  16px;  --cw-leading-lg:  24px;
  --cw-text-xl:  18px;  --cw-leading-xl:  28px;
  --cw-text-2xl: 20px;  --cw-leading-2xl: 28px;
  --cw-text-3xl: 24px;  --cw-leading-3xl: 32px;
  --cw-text-4xl: 30px;  --cw-leading-4xl: 36px;

  --cw-weight-regular:  400;
  --cw-weight-medium:   500;
  --cw-weight-semibold: 600;

  --cw-tracking-normal: 0;
  --cw-tracking-caps:   0.04em;   /* small capitals column headers only */

  /* ------------------------------------------------------------------ */
  /* 5. Space, size, layout                                               */
  /* ------------------------------------------------------------------ */

  --cw-space-0:  0;
  --cw-space-1:  4px;
  --cw-space-2:  8px;
  --cw-space-3:  12px;
  --cw-space-4:  16px;
  --cw-space-5:  20px;
  --cw-space-6:  24px;
  --cw-space-8:  32px;
  --cw-space-10: 40px;
  --cw-space-12: 48px;
  --cw-space-16: 64px;

  /* Page */
  --cw-page-pad:         var(--cw-space-4);  /* phone, raised by the layout at tablet and desktop */
  --cw-page-pad-tablet:  var(--cw-space-6);
  --cw-page-pad-desktop: var(--cw-space-8);
  --cw-page-max:         1280px;             /* records, settings, dashboards. Grids are full width */
  --cw-grid-gutter:      var(--cw-space-6);
  --cw-grid-gutter-phone: var(--cw-space-4);

  /* Shell */
  --cw-size-topbar:          56px;
  --cw-size-topbar-phone:    48px;
  --cw-size-workspace-line:  3px;
  --cw-size-contextbar:      40px;
  --cw-size-band-edge:       4px;
  --cw-size-nav:             256px;
  --cw-size-nav-tablet:      240px;
  --cw-size-nav-drawer:      280px;
  --cw-size-nav-rail:        72px;
  --cw-size-panel:           400px;   /* the one side panel, full width on a phone */
  --cw-size-formula-line:    32px;

  /* Controls and targets (V3-D30) */
  --cw-size-target:          44px;    /* touch target, every control on touch */
  --cw-size-target-pointer:  32px;    /* minimum on a fine pointer, still 24 or more per WCAG 2.5.8 */
  --cw-size-control:         36px;    /* desktop control height */
  --cw-size-control-tablet:  40px;
  --cw-size-control-phone:   44px;
  --cw-size-control-sign:    48px;    /* the one button on the signing screens */
  --cw-size-icon-sm: 16px;
  --cw-size-icon-md: 20px;
  --cw-size-icon-lg: 24px;
  --cw-icon-stroke:    1.75;
  --cw-icon-stroke-lg: 1.5;
  --cw-size-avatar:  28px;
  --cw-size-note-marker: 6px;

  /* Data grid rows (density in section 9) */
  --cw-size-row:         40px;    /* comfortable, the default (11 section 10) */
  --cw-size-row-compact: 32px;
  --cw-size-row-header:  40px;

  /* Sheet grid (STYLEGUIDE section 7). Rows under UX-44 await Rudi. */
  --cw-sheet-row:          32px;   /* Excel view, comfortable */
  --cw-sheet-row-compact:  28px;
  --cw-sheet-row-touch:    36px;   /* coarse pointer */
  --cw-sheet-row-modern:   40px;
  --cw-sheet-row-modern-touch: 44px;
  --cw-sheet-row-flagged:  56px;   /* Modern, a flagged line with the two figures beneath */
  --cw-sheet-header:       40px;
  --cw-sheet-header-modern: 48px;
  --cw-sheet-col-label:    320px;
  --cw-sheet-col-label-tablet: 240px;
  --cw-sheet-col-label-phone:  160px;
  --cw-sheet-col-ref:      56px;
  --cw-sheet-col-rownum:   40px;
  --cw-sheet-header-letters: 24px;
  --cw-sheet-col-num:      112px;  /* at rand thousands */
  --cw-sheet-col-num-rand: 128px;  /* at rand */
  --cw-sheet-col-pct:      88px;
  --cw-sheet-col-pct-modern: 112px;
  --cw-sheet-cell-pad:     0 8px;
  --cw-sheet-cell-pad-modern: 0 12px;
  --cw-sheet-edge:         3px;    /* changed and check edges */

  /* ------------------------------------------------------------------ */
  /* 6. Radius, border, shadow, focus                                     */
  /* ------------------------------------------------------------------ */

  --cw-radius-xs:   2px;    /* cells, chips inside the grid */
  --cw-radius-sm:   4px;    /* controls, badges */
  --cw-radius-md:   6px;    /* cards, panels, banners */
  --cw-radius-lg:   8px;    /* dialogues */
  --cw-radius-full: 999px;  /* pills, avatars */

  --cw-border-width:       1px;
  --cw-border-width-strong: 2px; /* focus ring and the selected cell only */

  --cw-shadow-sm: 0 1px 2px rgba(16, 18, 21, 0.06);
  --cw-shadow-md: 0 4px 12px rgba(16, 18, 21, 0.12), 0 1px 2px rgba(16, 18, 21, 0.06);
  --cw-shadow-lg: 0 12px 32px rgba(16, 18, 21, 0.18), 0 2px 4px rgba(16, 18, 21, 0.08);

  --cw-focus-ring:        0 0 0 2px var(--cw-color-surface), 0 0 0 4px var(--cw-color-focus); /* as box-shadow */
  --cw-focus-outline:     2px solid var(--cw-color-focus);   /* as outline, with the offset */
  --cw-focus-offset:      2px;

  /* ------------------------------------------------------------------ */
  /* 7. Motion                                                            */
  /* ------------------------------------------------------------------ */

  --cw-motion-fast: 120ms;   /* hover, focus, a badge change */
  --cw-motion-base: 200ms;   /* panel, drawer, menu, dialogue */
  --cw-ease: cubic-bezier(0.2, 0, 0, 1);
  --cw-skeleton-delay: 300ms;
  --cw-toast-duration: 6000ms;

  /* ------------------------------------------------------------------ */
  /* 8. Z index                                                           */
  /* ------------------------------------------------------------------ */

  --cw-z-sheet-frozen: 10;
  --cw-z-sticky:       20;
  --cw-z-contextbar:   30;
  --cw-z-topbar:       40;
  --cw-z-nav:          50;
  --cw-z-panel:        60;
  --cw-z-popover:      70;
  --cw-z-toast:        80;
  --cw-z-dialog:       90;
  --cw-z-overlay:      89;

  /* ------------------------------------------------------------------ */
  /* Brand identity (brand layer). The default is the platform's own.    */
  /* ------------------------------------------------------------------ */

  --cw-brand-name: "Castway Cloud";
  --cw-brand-logo: none;   /* url() set by a brand file */
  --cw-brand-mark: none;

  color-scheme: light;
}

/* -------------------------------------------------------------------- */
/* 9. Density and reduced motion                                          */
/* -------------------------------------------------------------------- */

:root[data-density="compact"] {
  --cw-size-row: var(--cw-size-row-compact);
  --cw-sheet-row: var(--cw-sheet-row-compact);
  --cw-sheet-row-modern: 32px;
}

@media (pointer: coarse) {
  :root {
    --cw-sheet-row: var(--cw-sheet-row-touch);
    --cw-sheet-row-modern: var(--cw-sheet-row-modern-touch);
    --cw-size-control: var(--cw-size-control-phone);
    --cw-size-target-pointer: var(--cw-size-target);
  }
}

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

/* -------------------------------------------------------------------- */
/* 10. Dark values                                                        */
/* Only what changes: colours, shadows, the scheme. Sizes, type, space,   */
/* radii and motion are the same in both themes.                          */
/* -------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --cw-color-surface:   var(--cw-neutral-d-surface);    /* #15181D */
    --cw-color-surface-2: var(--cw-neutral-d-surface-2);  /* #1C2027 */
    --cw-color-surface-3: var(--cw-neutral-d-surface-3);  /* #242932 */
    --cw-color-shell:     var(--cw-neutral-950);          /* #101215 */
    --cw-color-overlay:   rgba(0, 0, 0, 0.64);

    --cw-color-text:          #E8EAEE;   /* 14.8 on surface */
    --cw-color-text-2:        #B4BAC4;   /* 9.1 */
    --cw-color-text-3:        #8E96A3;   /* 6.0 */
    --cw-color-text-disabled: #5F6875;
    --cw-color-text-inverse:  var(--cw-neutral-900);

    --cw-color-border:          #343A44;
    --cw-color-border-2:        #2A2F38;
    --cw-color-border-strong:   #7C8796;   /* 4.9 non text on surface */
    --cw-color-border-disabled: #454C57;

    --cw-color-primary:           var(--cw-primary-300);  /* #7FB0EA, 7.9 on surface */
    --cw-color-primary-strong:    var(--cw-primary-200);  /* #A4C6F0 */
    --cw-color-on-primary:        var(--cw-primary-900);  /* #0D2643, 6.8 on primary */
    --cw-color-primary-soft:      #1A2E48;
    --cw-color-primary-soft-text: var(--cw-primary-200);  /* 7.8 on primary-soft */

    --cw-color-accent:           var(--cw-accent-300);    /* #A99BEF, 7.3 on surface */
    --cw-color-accent-strong:    var(--cw-accent-200);
    --cw-color-on-accent:        #1B1540;                 /* 7.0 on accent */
    --cw-color-accent-soft:      var(--cw-accent-900);    /* #27224A */
    --cw-color-accent-soft-text: var(--cw-accent-200);    /* #C7BDF7, 8.5 on accent-soft */

    --cw-color-link:       var(--cw-primary-300);  /* 7.9 on surface, 7.2 on surface-2 */
    --cw-color-link-hover: var(--cw-primary-200);
    --cw-color-focus:      var(--cw-primary-300);  /* 7.9 non text */
    --cw-color-icon:       #8E96A3;
    --cw-color-icon-strong: #B4BAC4;

    --cw-danger-strong:    #F19A92;   /* 8.3 on surface */
    --cw-danger-soft:      #3D1F1C;
    --cw-danger-soft-text: #F5B5AE;   /* 8.6 on danger-soft */
    --cw-danger-on:        #2A0906;   /* 8.6 on danger-strong */
    --cw-warning-strong:    #F2A653;  /* 8.8 */
    --cw-warning-soft:      #3C2A14;
    --cw-warning-soft-text: #F7C48A;  /* 8.6 */
    --cw-warning-on:        #2A1600;  /* 8.5 */
    --cw-success-strong:    #6CC98A;  /* 8.8 */
    --cw-success-soft:      #16301F;
    --cw-success-soft-text: #9BDDB0;  /* 9.1 */
    --cw-success-on:        #052E14;  /* 7.4 */
    --cw-info-strong:    #7FB0EA;     /* 7.9 */
    --cw-info-soft:      #1A2E48;
    --cw-info-soft-text: #A4C6F0;     /* 7.8 */
    --cw-info-on:        #0D2643;

    --cw-state-draft:           var(--cw-neutral-d-surface-3);
    --cw-state-draft-text:      #B4BAC4;
    --cw-state-queued:          var(--cw-neutral-d-surface-3);
    --cw-state-queued-text:     #B4BAC4;
    --cw-state-superseded:      var(--cw-neutral-d-surface-3);
    --cw-state-superseded-text: #B4BAC4;   /* 7.5 on surface-3 */

    --cw-variance-unfavourable:      #F19A92;  /* 8.3 on surface, 7.6 on surface-2 */
    --cw-variance-unfavourable-soft: #3D1F1C;
    --cw-variance-favourable:        #6CC98A;  /* 8.8 on surface, 8.1 on surface-2 */
    --cw-variance-favourable-soft:   #16301F;
    --cw-variance-neutral:           #8E96A3;  /* 6.0 */

    --cw-workspace-live:        var(--cw-primary-300);
    --cw-side-advisory:          var(--cw-primary-900);
    --cw-side-advisory-text:     var(--cw-primary-100);
    --cw-side-municipality:      var(--cw-accent-900);
    --cw-side-municipality-text: var(--cw-accent-100);
    --cw-side-platform:          var(--cw-neutral-d-surface-3);
    --cw-side-platform-text:     #E8EAEE;
    --cw-workspace-test:        #F59E0B;   /* unchanged by design */
    --cw-workspace-test-text:   #1B1F26;   /* 7.7 */
    --cw-workspace-test-border: #F2A653;

    --cw-band-1: #7FB0EA;  --cw-band-2: #5CC9C8;  --cw-band-3: #C79AE6;  --cw-band-4: #F2A653;
    --cw-band-5: #F19A92;  --cw-band-6: #8BD08B;  --cw-band-7: #A99BEF;  --cw-band-8: #D9C24A;
    --cw-band-on: #15181D;   /* dark text on every band, 7.3 or more */

    --cw-chart-1: #7FB0EA;  --cw-chart-2: #5CC9C8;  --cw-chart-3: #F2A653;
    --cw-chart-4: #C79AE6;  --cw-chart-5: #D9C24A;  --cw-chart-6: #8E96A3;

    --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --cw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --cw-color-surface:   var(--cw-neutral-d-surface);
  --cw-color-surface-2: var(--cw-neutral-d-surface-2);
  --cw-color-surface-3: var(--cw-neutral-d-surface-3);
  --cw-color-shell:     var(--cw-neutral-950);
  --cw-color-overlay:   rgba(0, 0, 0, 0.64);

  --cw-color-text:          #E8EAEE;
  --cw-color-text-2:        #B4BAC4;
  --cw-color-text-3:        #8E96A3;
  --cw-color-text-disabled: #5F6875;
  --cw-color-text-inverse:  var(--cw-neutral-900);

  --cw-color-border:          #343A44;
  --cw-color-border-2:        #2A2F38;
  --cw-color-border-strong:   #7C8796;
  --cw-color-border-disabled: #454C57;

  --cw-color-primary:           var(--cw-primary-300);
  --cw-color-primary-strong:    var(--cw-primary-200);
  --cw-color-on-primary:        var(--cw-primary-900);
  --cw-color-primary-soft:      #1A2E48;
  --cw-color-primary-soft-text: var(--cw-primary-200);

  --cw-color-accent:           var(--cw-accent-300);
  --cw-color-accent-strong:    var(--cw-accent-200);
  --cw-color-on-accent:        #1B1540;
  --cw-color-accent-soft:      var(--cw-accent-900);
  --cw-color-accent-soft-text: var(--cw-accent-200);

  --cw-color-link:       var(--cw-primary-300);
  --cw-color-link-hover: var(--cw-primary-200);
  --cw-color-focus:      var(--cw-primary-300);
  --cw-color-icon:       #8E96A3;
  --cw-color-icon-strong: #B4BAC4;

  --cw-danger-strong:    #F19A92;
  --cw-danger-soft:      #3D1F1C;
  --cw-danger-soft-text: #F5B5AE;
  --cw-danger-on:        #2A0906;
  --cw-warning-strong:    #F2A653;
  --cw-warning-soft:      #3C2A14;
  --cw-warning-soft-text: #F7C48A;
  --cw-warning-on:        #2A1600;
  --cw-success-strong:    #6CC98A;
  --cw-success-soft:      #16301F;
  --cw-success-soft-text: #9BDDB0;
  --cw-success-on:        #052E14;
  --cw-info-strong:    #7FB0EA;
  --cw-info-soft:      #1A2E48;
  --cw-info-soft-text: #A4C6F0;
  --cw-info-on:        #0D2643;

  --cw-state-draft:           var(--cw-neutral-d-surface-3);
  --cw-state-draft-text:      #B4BAC4;
  --cw-state-queued:          var(--cw-neutral-d-surface-3);
  --cw-state-queued-text:     #B4BAC4;
  --cw-state-superseded:      var(--cw-neutral-d-surface-3);
  --cw-state-superseded-text: #B4BAC4;

  --cw-variance-unfavourable:      #F19A92;
  --cw-variance-unfavourable-soft: #3D1F1C;
  --cw-variance-favourable:        #6CC98A;
  --cw-variance-favourable-soft:   #16301F;
  --cw-variance-neutral:           #8E96A3;

  --cw-workspace-live:        var(--cw-primary-300);
  --cw-side-advisory:          var(--cw-primary-900);
  --cw-side-advisory-text:     var(--cw-primary-100);
  --cw-side-municipality:      var(--cw-accent-900);
  --cw-side-municipality-text: var(--cw-accent-100);
  --cw-side-platform:          var(--cw-neutral-d-surface-3);
  --cw-side-platform-text:     #E8EAEE;
  --cw-workspace-test:        #F59E0B;
  --cw-workspace-test-text:   #1B1F26;
  --cw-workspace-test-border: #F2A653;

  --cw-band-1: #7FB0EA;  --cw-band-2: #5CC9C8;  --cw-band-3: #C79AE6;  --cw-band-4: #F2A653;
  --cw-band-5: #F19A92;  --cw-band-6: #8BD08B;  --cw-band-7: #A99BEF;  --cw-band-8: #D9C24A;
  --cw-band-on: #15181D;

  --cw-chart-1: #7FB0EA;  --cw-chart-2: #5CC9C8;  --cw-chart-3: #F2A653;
  --cw-chart-4: #C79AE6;  --cw-chart-5: #D9C24A;  --cw-chart-6: #8E96A3;

  --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --cw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------- */
/* 11. The brand layer (V3-D40, STYLEGUIDE section 15)                    */
/* A brand is a separate file that sets, on :root[data-brand="<slug>"]    */
/* and inside the same two dark guards, ONLY these tokens:                */
/*   --cw-brand-name, --cw-brand-logo, --cw-brand-mark                    */
/*   --cw-primary-50 to --cw-primary-900                                  */
/*   --cw-accent-50 to --cw-accent-900                                    */
/*   --cw-color-shell                                                     */
/*   --cw-font-sans (optional, must keep tabular figures)                 */
/* Everything else derives. A brand that sets a semantic, state, variance,*/
/* workspace, band or chart token is refused by the brand contrast check  */
/* (14 section 8), which also computes every ratio in STYLEGUIDE 2.2, 2.3 */
/* and 2.6 for both themes before the brand activates.                    */
/* Nothing in this file is ever applied to the Treasury workbook or PDF   */
/* (V3-D27, V3-D40).                                                      */
/* -------------------------------------------------------------------- */