/* ============================================================
   Shared design tokens for Denver House Consultancy and SchemeReady

   One file, two sites. Denver House imports it from css/style.css,
   SchemeReady imports it from assets/site.css, and the app picks it
   up because app.css layers on site.css.

   How it is organised
     1.  Light palette on bare :root. This is the default and the
         design both sites are actually built for.
     2.  Shape, space, depth, layering and type. These do not change
         between themes, so they are declared once.
     3.  The dark overrides, written twice: once inside
         @media (prefers-color-scheme: dark) guarded by
         :root:not([data-theme="light"]), and once under
         :root[data-theme="dark"]. A manual choice therefore wins in
         both directions. No colour has its only definition inside a
         media query.
     4.  Compatibility aliases so the older --sr-* and Denver House
         token names keep working and follow the theme.

   Rules for everyone using this file
     - Every colour comes from a token. Do not write a hex value in a
       component stylesheet.
     - Colour never carries meaning on its own. Readiness bands pair a
       colour with a shape and always print the band name.
     - The bright Denver House gradient is decorative. It is never text
       and never sits behind text. Use the ink gradient for either.
     - Run tools/check_contrast.py after changing any colour here.

   Documented in docs/DESIGN.md and docs/NOTES-tokens.md.
   ============================================================ */

/* ------------------------------------------------------------
   1. Light palette (the default)
   ------------------------------------------------------------ */
/* ---- Type: Inter, self hosted ----
   One family for both sites and the administration portal. The two files
   are the variable font instanced to weights 400 to 800 and subset to
   Latin (assets/fonts/, built by fontTools from the installed family;
   SIL Open Font License, see assets/fonts/LICENCE.txt). Self hosted so no
   page makes a request to a third party for a font, which keeps the
   privacy notice's "no third parties on a page view" true and font-src
   at 'self'. font-display: swap shows the fallback stack first on a slow
   connection rather than blank text. The URL is relative to this file,
   so it works wherever tokens.css is copied (the admin vendors it, the
   Denver House build copies it) as long as fonts/ travels with it. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --ds-surface-page: #FBFAF8;      /* the page itself */
  --ds-surface-raised: #FFFFFF;    /* cards, header, inputs, popovers */
  --ds-surface-sunken: #F1EFEA;    /* soft section bands, table heads, code */
  --ds-surface-overlay: #FFFFFF;   /* dialogs and sheets above the scrim */
  --ds-surface-scrim: rgba(20, 24, 36, .55);
  --ds-surface-inverse: #16213A;   /* a dark block inside a light page */

  /* ---- Text ---- */
  --ds-text-default: #2B2926;
  --ds-text-heading: #16213A;      /* shared dark navy ink, both sites */
  --ds-text-muted: #5C5851;
  --ds-text-inverse: #FFFFFF;      /* text on --ds-surface-inverse */

  /* ---- Borders ---- */
  --ds-border-subtle: #E4DFD6;     /* decorative rules and card edges */
  --ds-border-strong: #8A857B;     /* input and control edges, 3:1 */
  --ds-border-focus: #16213A;      /* the focus ring */
  --ds-border-focus-offset: #FFFFFF; /* the halo between ring and control */

  /* ---- Denver House brand ----
     Bright ramp: the signature gradient. Decorative only.
     Ink ramp: the same sweep, deep enough to be text on a light
     surface and to carry white text when used as a fill. */
  --ds-brand-1: #F7941D;           /* orange */
  --ds-brand-2: #E6197F;           /* magenta */
  --ds-brand-3: #8E2DBE;           /* purple */
  --ds-brand-flat: #E6197F;        /* flat fallback for the gradient */
  --ds-brand-ink-1: #A35200;
  --ds-brand-ink-2: #C8136B;
  --ds-brand-ink-3: #7A22A6;
  --ds-brand-ink: #C8136B;         /* flat brand colour that is safe as text */
  --ds-brand-on-ink: #FFFFFF;      /* text on an ink-ramp fill */
  --ds-brand-gradient:
    linear-gradient(135deg, var(--ds-brand-1) 0%, var(--ds-brand-2) 48%, var(--ds-brand-3) 100%);
  --ds-brand-gradient-ink:
    linear-gradient(135deg, var(--ds-brand-ink-1) 0%, var(--ds-brand-ink-2) 48%, var(--ds-brand-ink-3) 100%);
  --ds-brand-gradient-soft:
    linear-gradient(135deg, rgba(247, 148, 29, .10), rgba(230, 25, 127, .10) 48%, rgba(142, 45, 190, .10));

  /* ---- Denver House atmosphere ----
     The washes behind the Denver House hero, the glow under a primary
     button and the halo on a focused input. Decorative only: nothing
     is drawn on top of them, so they carry no contrast target. They
     are listed here rather than in css/style.css so the Denver House
     page can change with the theme like everything else. */
  --ds-brand-glow-1: rgba(247, 148, 29, .12);
  --ds-brand-glow-2: rgba(230, 25, 127, .07);
  --ds-brand-glow-3: rgba(142, 45, 190, .12);
  --ds-brand-shadow: 0 8px 20px rgba(230, 25, 127, .28);
  --ds-brand-shadow-strong: 0 12px 26px rgba(230, 25, 127, .38);
  /* The SchemeReady button: the family gradient resolving into navy, so
     its shadow is navy with a little of the magenta in it. */
  --ds-sr-btn-shadow: 0 6px 16px rgba(20, 33, 61, .22), 0 1px 2px rgba(20, 33, 61, .18);
  --ds-sr-btn-shadow-strong: 0 12px 26px rgba(20, 33, 61, .30), 0 2px 4px rgba(200, 19, 107, .18);
  --ds-brand-art-shadow: 0 24px 40px rgba(142, 45, 190, .25);
  --ds-brand-focus-glow: 0 0 0 3px rgba(230, 25, 127, .12);

  /* ---- SchemeReady ----
     A calm navy ink and one strong accent. The accent is a highlight,
     never a page or card surface. */
  --ds-sr-primary: #14213D;             /* the working ink: text, icons, rules */
  --ds-sr-surface-brand: #14213D;       /* navy surfaces: header, banners */
  --ds-sr-surface-brand-hover: #1B2E5C;
  --ds-sr-on-brand: #FFFFFF;            /* text on a navy surface */
  /* An edge on a navy surface that says "this is a control" without
     competing with the navigation beside it. Pure white was tried and is
     too loud: it made the appearance toggle the strongest line in the app
     header. Translucent, so it holds whatever navy it is drawn on.

     Quiet, but not below the line: over #14213D this composites to
     rgb(105,113,131), which is 3.26 to 1 against the header. WCAG 1.4.11
     wants 3 to 1 for the edge of a control, and .32 was tried first and
     came out at 2.85. */
  --ds-sr-nav-quiet-border: rgba(255, 255, 255, .36);
  --ds-sr-brand-tint: #E7ECF6;          /* pale navy wash for chips and hovers */
  --ds-sr-accent: #F2A900;              /* the single accent, as a fill */
  --ds-sr-accent-hover: #E09A00;
  --ds-sr-accent-tint: #FFF4D6;
  --ds-sr-accent-ink: #7A5200;          /* the accent written as text */
  --ds-sr-accent-edge: #B07700;         /* the accent as a line that must be seen */
  --ds-sr-on-accent: #14213D;           /* text on an accent fill */
  --ds-sr-link: #1C4A9E;
  --ds-sr-link-hover: #14213D;
  --ds-sr-footer-bg: var(--ds-footer-bg);
  --ds-sr-footer-text: var(--ds-footer-text);
  --ds-sr-footer-muted: var(--ds-footer-muted);
  --ds-sr-footer-link: #FFD36A;
  --ds-sr-footer-line: var(--ds-footer-line);
  /* The family resemblance: the Denver House sweep resolving into the
     SchemeReady navy. Brand moments only, and every stop is text safe. */
  --ds-sr-brand-gradient:
    linear-gradient(120deg, var(--ds-brand-ink-1) 0%, var(--ds-brand-ink-2) 42%, var(--ds-sr-primary) 100%);
  --ds-sr-brand-gradient-soft:
    linear-gradient(120deg, rgba(163, 82, 0, .08), rgba(200, 19, 107, .08) 42%, rgba(20, 33, 61, .08));

  /* ---- Footer, a dark block in both themes so the page always ends
     on the brand ink ---- */
  --ds-footer-bg: #14213D;
  --ds-footer-text: #FFFFFF;
  --ds-footer-muted: #C9D0DE;
  --ds-footer-line: #37415C;

  /* ---- Semantic ---- */
  --ds-success-bg: #E2F3E9;  --ds-success-border: #2F7D51;  --ds-success-fg: #0F5132;
  --ds-warning-bg: #FFF2CF;  --ds-warning-border: #8A6200;  --ds-warning-fg: #6B4A00;
  --ds-error-bg: #FCE5E4;    --ds-error-border: #B42318;    --ds-error-fg: #8E1B12;
  --ds-info-bg: #E6EDFA;     --ds-info-border: #2C5AA8;     --ds-info-fg: #1C4A9E;

  /* ---- Readiness bands ----
     Four trios. Each is paired with a shape below, so the band never
     depends on colour alone, and the name is always printed. */
  --ds-band-ready-bg: #DDF3E4;   --ds-band-ready-border: #2F7D51;   --ds-band-ready-fg: #0F5132;
  --ds-band-nearly-bg: #FFF1C7;  --ds-band-nearly-border: #8A6200;  --ds-band-nearly-fg: #6B4A00;
  --ds-band-gaps-bg: #FFE0CC;    --ds-band-gaps-border: #A24A00;    --ds-band-gaps-fg: #7A3300;
  --ds-band-not-bg: #FBD9D9;     --ds-band-not-border: #B42318;     --ds-band-not-fg: #7F1D1D;
}

/* ------------------------------------------------------------
   2. Shape, space, depth, layering and type
   These are the same in both themes, so they are declared once.
   ------------------------------------------------------------ */
:root {
  /* Band marker shapes. Used by the ::before marker on .band. */
  --ds-band-ready-shape: circle(50% at 50% 50%);
  --ds-band-nearly-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --ds-band-gaps-shape: polygon(50% 0%, 100% 100%, 0% 100%);
  --ds-band-not-shape: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

  /* Spacing */
  --ds-space-3xs: .125rem;
  --ds-space-2xs: .25rem;
  --ds-space-xs: .5rem;
  --ds-space-sm: .75rem;
  --ds-space-md: 1rem;
  --ds-space-lg: 1.5rem;
  --ds-space-xl: 2rem;
  --ds-space-2xl: 3rem;
  --ds-space-3xl: 4rem;
  --ds-space-4xl: 6rem;

  /* Radius */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;
  --ds-radius-pill: 999px;
  --ds-radius-circle: 50%;

  /* Depth */
  --ds-shadow-sm: 0 1px 2px rgba(20, 33, 61, .06);
  --ds-shadow-md: 0 1px 2px rgba(20, 33, 61, .06), 0 8px 24px rgba(20, 33, 61, .07);
  --ds-shadow-lg: 0 2px 4px rgba(20, 33, 61, .08), 0 18px 40px rgba(20, 33, 61, .12);
  --ds-shadow-none: none;

  /* Layering */
  --ds-z-base: 0;
  --ds-z-raised: 10;
  --ds-z-sticky: 100;
  --ds-z-header: 200;
  --ds-z-dropdown: 300;
  --ds-z-overlay: 800;
  --ds-z-modal: 900;
  --ds-z-toast: 1000;
  --ds-z-skip: 1100;

  /* Type */
  --ds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ds-fs-xs: clamp(.78rem, .76rem + .1vw, .82rem);
  --ds-fs-sm: clamp(.86rem, .82rem + .2vw, .93rem);
  --ds-fs-base: clamp(1rem, .96rem + .25vw, 1.08rem);
  --ds-fs-lead: clamp(1.1rem, 1.02rem + .45vw, 1.3rem);
  --ds-fs-h4: clamp(1rem, .96rem + .25vw, 1.08rem);
  --ds-fs-h3: clamp(1.15rem, 1.08rem + .4vw, 1.35rem);
  --ds-fs-h2: clamp(1.55rem, 1.3rem + 1.2vw, 2.15rem);
  --ds-fs-h1: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --ds-fs-display: clamp(2.4rem, 1.8rem + 3vw, 3.6rem);
  --ds-lh-tight: 1.15;
  --ds-lh-heading: 1.2;   /* the Denver House heading step */
  --ds-lh-snug: 1.3;
  --ds-lh-normal: 1.6;
  --ds-lh-relaxed: 1.75;
  --ds-weight-normal: 400;
  --ds-weight-medium: 600;
  --ds-weight-bold: 700;
  --ds-weight-heavy: 800;
  --ds-measure: 68ch;

  /* Layout */
  --ds-container: 1120px;
  --ds-container-narrow: 760px;
  --ds-container-wide: 1320px;
  --ds-gutter: clamp(1rem, 4vw, 2rem);
  --ds-header-h: 68px;

  /* Motion. Set to 0s under prefers-reduced-motion at the end of this file. */
  --ds-motion-fast: .12s;
  --ds-motion-base: .18s;
  --ds-motion-slow: .3s;
  --ds-motion-ease: cubic-bezier(.2, .6, .3, 1);
}

/* ------------------------------------------------------------
   3a. Dark theme, followed automatically when the reader has asked
   their system for dark and has not chosen light here.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ds-surface-page: #0F1526;
    --ds-surface-raised: #1A2340;
    --ds-surface-sunken: #151C31;
    --ds-surface-overlay: #1D2749;
    --ds-surface-scrim: rgba(4, 7, 15, .66);
    --ds-surface-inverse: #F4F2EE;

    --ds-text-default: #E9E7E2;
    --ds-text-heading: #F4F2EE;
    --ds-text-muted: #B3AEA5;
    --ds-text-inverse: #0F1526;

    --ds-border-subtle: #2C3757;
    --ds-border-strong: #7C87A5;
    --ds-border-focus: #FFD36A;
    --ds-border-focus-offset: #0F1526;

    --ds-brand-1: #FBA83F;
    --ds-brand-2: #FF3E96;
    --ds-brand-3: #B36BE8;
    --ds-brand-flat: #FF3E96;
    --ds-brand-ink-1: #FFB65C;
    --ds-brand-ink-2: #FF8ABE;
    --ds-brand-ink-3: #D3A6F5;
    --ds-brand-ink: #FF8ABE;
    --ds-brand-on-ink: #1A0A12;
    --ds-brand-gradient-soft:
      linear-gradient(135deg, rgba(251, 168, 63, .14), rgba(255, 62, 150, .14) 48%, rgba(179, 107, 232, .14));

    --ds-brand-glow-1: rgba(251, 168, 63, .16);
    --ds-brand-glow-2: rgba(255, 62, 150, .10);
    --ds-brand-glow-3: rgba(179, 107, 232, .20);
    --ds-brand-shadow: 0 8px 20px rgba(0, 0, 0, .5);
    --ds-brand-shadow-strong: 0 12px 26px rgba(0, 0, 0, .62);
    --ds-sr-btn-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
    --ds-sr-btn-shadow-strong: 0 12px 26px rgba(0, 0, 0, .62), 0 2px 4px rgba(0, 0, 0, .5);
    --ds-brand-art-shadow: 0 24px 40px rgba(179, 107, 232, .3);
    --ds-brand-focus-glow: 0 0 0 3px rgba(255, 138, 190, .22);

    --ds-sr-primary: #AFC4EE;
    --ds-sr-surface-brand: #0E1830;
    --ds-sr-surface-brand-hover: #26386B;
    --ds-sr-on-brand: #FFFFFF;
    --ds-sr-nav-quiet-border: rgba(255, 255, 255, .38);
    --ds-sr-brand-tint: #223059;
    --ds-sr-accent: #F5B324;
    --ds-sr-accent-hover: #FFC64A;
    --ds-sr-accent-tint: #3A2C08;
    --ds-sr-accent-ink: #F5B324;
    --ds-sr-accent-edge: #F5B324;
    --ds-sr-on-accent: #1A1200;
    --ds-sr-link: #9FBCFF;
    --ds-sr-link-hover: #FFFFFF;
    --ds-footer-bg: #0A0F1D;
    --ds-footer-muted: #C5CBDA;
    --ds-footer-line: #222C48;
    --ds-sr-brand-gradient-soft:
      linear-gradient(120deg, rgba(255, 182, 92, .14), rgba(255, 138, 190, .14) 42%, rgba(175, 196, 238, .14));

    --ds-success-bg: #123B27;  --ds-success-border: #4FA97A;  --ds-success-fg: #B7EBCB;
    --ds-warning-bg: #4A3300;  --ds-warning-border: #C79100;  --ds-warning-fg: #FFE3A0;
    --ds-error-bg: #4E1616;    --ds-error-border: #E8746B;    --ds-error-fg: #FFC2C2;
    --ds-info-bg: #16254A;     --ds-info-border: #6E93DE;     --ds-info-fg: #BFD0F7;

    --ds-band-ready-bg: #123B27;   --ds-band-ready-border: #4FA97A;   --ds-band-ready-fg: #B7EBCB;
    --ds-band-nearly-bg: #4A3300;  --ds-band-nearly-border: #C79100;  --ds-band-nearly-fg: #FFE3A0;
    --ds-band-gaps-bg: #5A2600;    --ds-band-gaps-border: #D97A33;    --ds-band-gaps-fg: #FFC9A8;
    --ds-band-not-bg: #5C1A1A;     --ds-band-not-border: #E8746B;     --ds-band-not-fg: #FFC2C2;

    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --ds-shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --ds-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
  }
}

/* ------------------------------------------------------------
   3b. Dark theme chosen here. Identical values to 3a, written as a
   plain selector so a manual choice beats the system setting.
   ------------------------------------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ds-surface-page: #0F1526;
  --ds-surface-raised: #1A2340;
  --ds-surface-sunken: #151C31;
  --ds-surface-overlay: #1D2749;
  --ds-surface-scrim: rgba(4, 7, 15, .66);
  --ds-surface-inverse: #F4F2EE;

  --ds-text-default: #E9E7E2;
  --ds-text-heading: #F4F2EE;
  --ds-text-muted: #B3AEA5;
  --ds-text-inverse: #0F1526;

  --ds-border-subtle: #2C3757;
  --ds-border-strong: #7C87A5;
  --ds-border-focus: #FFD36A;
  --ds-border-focus-offset: #0F1526;

  --ds-brand-1: #FBA83F;
  --ds-brand-2: #FF3E96;
  --ds-brand-3: #B36BE8;
  --ds-brand-flat: #FF3E96;
  --ds-brand-ink-1: #FFB65C;
  --ds-brand-ink-2: #FF8ABE;
  --ds-brand-ink-3: #D3A6F5;
  --ds-brand-ink: #FF8ABE;
  --ds-brand-on-ink: #1A0A12;
  --ds-brand-gradient-soft:
    linear-gradient(135deg, rgba(251, 168, 63, .14), rgba(255, 62, 150, .14) 48%, rgba(179, 107, 232, .14));

  --ds-brand-glow-1: rgba(251, 168, 63, .16);
  --ds-brand-glow-2: rgba(255, 62, 150, .10);
  --ds-brand-glow-3: rgba(179, 107, 232, .20);
  --ds-brand-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  --ds-brand-shadow-strong: 0 12px 26px rgba(0, 0, 0, .62);
  --ds-sr-btn-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  --ds-sr-btn-shadow-strong: 0 12px 26px rgba(0, 0, 0, .62), 0 2px 4px rgba(0, 0, 0, .5);
  --ds-brand-art-shadow: 0 24px 40px rgba(179, 107, 232, .3);
  --ds-brand-focus-glow: 0 0 0 3px rgba(255, 138, 190, .22);

  --ds-sr-primary: #AFC4EE;
  --ds-sr-surface-brand: #0E1830;
  --ds-sr-surface-brand-hover: #26386B;
  --ds-sr-on-brand: #FFFFFF;
  --ds-sr-nav-quiet-border: rgba(255, 255, 255, .38);
  --ds-sr-brand-tint: #223059;
  --ds-sr-accent: #F5B324;
  --ds-sr-accent-hover: #FFC64A;
  --ds-sr-accent-tint: #3A2C08;
  --ds-sr-accent-ink: #F5B324;
  --ds-sr-accent-edge: #F5B324;
  --ds-sr-on-accent: #1A1200;
  --ds-sr-link: #9FBCFF;
  --ds-sr-link-hover: #FFFFFF;
  --ds-footer-bg: #0A0F1D;
  --ds-footer-muted: #C5CBDA;
  --ds-footer-line: #222C48;
  --ds-sr-brand-gradient-soft:
    linear-gradient(120deg, rgba(255, 182, 92, .14), rgba(255, 138, 190, .14) 42%, rgba(175, 196, 238, .14));

  --ds-success-bg: #123B27;  --ds-success-border: #4FA97A;  --ds-success-fg: #B7EBCB;
  --ds-warning-bg: #4A3300;  --ds-warning-border: #C79100;  --ds-warning-fg: #FFE3A0;
  --ds-error-bg: #4E1616;    --ds-error-border: #E8746B;    --ds-error-fg: #FFC2C2;
  --ds-info-bg: #16254A;     --ds-info-border: #6E93DE;     --ds-info-fg: #BFD0F7;

  --ds-band-ready-bg: #123B27;   --ds-band-ready-border: #4FA97A;   --ds-band-ready-fg: #B7EBCB;
  --ds-band-nearly-bg: #4A3300;  --ds-band-nearly-border: #C79100;  --ds-band-nearly-fg: #FFE3A0;
  --ds-band-gaps-bg: #5A2600;    --ds-band-gaps-border: #D97A33;    --ds-band-gaps-fg: #FFC9A8;
  --ds-band-not-bg: #5C1A1A;     --ds-band-not-border: #E8746B;     --ds-band-not-fg: #FFC2C2;

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ds-shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --ds-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------
   4. Compatibility aliases
   The older names used by css/style.css (Denver House) and by
   assets/site.css and app/css/app.css (SchemeReady). They point at
   the tokens above, so they follow the theme on their own. New work
   should use the --ds-* names.
   ------------------------------------------------------------ */
:root {
  /* Denver House */
  --orange: var(--ds-brand-1);
  --magenta: var(--ds-brand-ink);
  --purple: var(--ds-brand-3);
  --ink: var(--ds-text-heading);
  --body: var(--ds-text-default);
  --muted: var(--ds-text-muted);
  --bg-soft: var(--ds-surface-sunken);
  --line: var(--ds-border-subtle);
  --white: var(--ds-surface-raised);
  --grad: var(--ds-brand-gradient);
  --grad-ink: var(--ds-brand-gradient-ink);
  --grad-soft: var(--ds-brand-gradient-soft);
  --footer-bg: var(--ds-footer-bg);
  --footer-text: var(--ds-footer-text);
  --footer-muted: var(--ds-footer-muted);
  --footer-line: var(--ds-footer-line);
  --shadow: var(--ds-shadow-md);
  --shadow-lg: var(--ds-shadow-lg);
  --radius: var(--ds-radius-md);
  --font: var(--ds-font-sans);

  /* SchemeReady */
  --sr-navy: var(--ds-sr-surface-brand);
  --sr-navy-700: var(--ds-sr-surface-brand-hover);
  --sr-navy-tint: var(--ds-sr-brand-tint);
  --sr-amber: var(--ds-sr-accent);
  --sr-amber-600: var(--ds-sr-accent-hover);
  --sr-amber-tint: var(--ds-sr-accent-tint);
  --sr-amber-text: var(--ds-sr-accent-ink);
  --sr-bg: var(--ds-surface-page);
  --sr-bg-soft: var(--ds-surface-sunken);
  --sr-surface: var(--ds-surface-raised);
  --sr-line: var(--ds-border-subtle);
  --sr-line-strong: var(--ds-border-strong);
  --sr-text: var(--ds-text-default);
  --sr-muted: var(--ds-text-muted);
  --sr-heading: var(--ds-text-heading);
  --sr-link: var(--ds-sr-link);
  --sr-link-hover: var(--ds-sr-link-hover);
  --sr-focus: var(--ds-border-focus);
  --sr-focus-gap: var(--ds-border-focus-offset);
  --sr-success: var(--ds-success-fg);
  --sr-error: var(--ds-error-fg);
  --sr-footer-bg: var(--ds-sr-footer-bg);
  --sr-footer-text: var(--ds-sr-footer-text);
  --sr-footer-muted: var(--ds-sr-footer-muted);
  --sr-footer-link: var(--ds-sr-footer-link);
  --sr-footer-line: var(--ds-sr-footer-line);
  --sr-band-ready-bg: var(--ds-band-ready-bg);
  --sr-band-ready-text: var(--ds-band-ready-fg);
  --sr-band-nearly-bg: var(--ds-band-nearly-bg);
  --sr-band-nearly-text: var(--ds-band-nearly-fg);
  --sr-band-gaps-bg: var(--ds-band-gaps-bg);
  --sr-band-gaps-text: var(--ds-band-gaps-fg);
  --sr-band-not-bg: var(--ds-band-not-bg);
  --sr-band-not-text: var(--ds-band-not-fg);
  --sr-callout-bg: var(--ds-surface-sunken);
  --sr-callout-warn-bg: var(--ds-error-bg);
  --sr-radius: var(--ds-radius-md);
  --sr-radius-sm: var(--ds-radius-sm);
  --sr-radius-pill: var(--ds-radius-pill);
  --sr-shadow: var(--ds-shadow-md);
  --sr-shadow-lg: var(--ds-shadow-lg);
  --sr-font: var(--ds-font-sans);
  --sr-font-mono: var(--ds-font-mono);
  --sr-container: var(--ds-container);
  --sr-gutter: var(--ds-gutter);
  --sr-header-h: var(--ds-header-h);
  --sr-fs-sm: var(--ds-fs-sm);
  --sr-fs-base: var(--ds-fs-base);
  --sr-fs-lead: var(--ds-fs-lead);
  --sr-fs-h3: var(--ds-fs-h3);
  --sr-fs-h2: var(--ds-fs-h2);
  --sr-fs-h1: var(--ds-fs-h1);
  --sr-fs-display: var(--ds-fs-display);
}

/* ------------------------------------------------------------
   5. Motion preference
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-fast: 0s;
    --ds-motion-base: 0s;
    --ds-motion-slow: 0s;
  }
}

/* ------------------------------------------------------------
   6. Print
   Paper is white and ink is black whichever theme the reader was
   looking at. Redefining the tokens here means no stylesheet needs a
   hex value in its print block. Every name below already has a value
   on bare :root above, so nothing is introduced only in here.

   A media query adds no specificity, so a bare :root in here would lose
   to :root[data-theme="dark"] and to the :root:not([data-theme="light"])
   inside the dark media query, and a reader who had chosen dark would
   print dark. The selector list repeats every shape the dark theme can
   take, at the same specificity and later in the file, so paper stays
   light. app/css/print.css does the same for the app.
   ------------------------------------------------------------ */
@media print {
  :root,
  :root[data-theme="light"],
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    color-scheme: light;

    --ds-surface-page: #FFFFFF;
    --ds-surface-raised: #FFFFFF;
    --ds-surface-sunken: #FFFFFF;
    --ds-surface-overlay: #FFFFFF;
    --ds-surface-inverse: #FFFFFF;

    --ds-text-default: #000000;
    --ds-text-heading: #000000;
    --ds-text-muted: #333333;
    --ds-text-inverse: #000000;

    --ds-border-subtle: #999999;
    --ds-border-strong: #000000;

    --ds-footer-bg: #FFFFFF;
    --ds-footer-text: #000000;
    --ds-footer-muted: #333333;
    --ds-footer-line: #000000;

    --ds-sr-primary: #000000;
    --ds-sr-surface-brand: #FFFFFF;
    --ds-sr-surface-brand-hover: #000000;
    --ds-sr-on-brand: #000000;
    --ds-sr-nav-quiet-border: #000000;   /* forced colours: nothing translucent */
    --ds-sr-brand-tint: #FFFFFF;
    --ds-sr-accent-tint: #FFFFFF;
    --ds-sr-accent-ink: #000000;
    --ds-sr-link: #000000;
    --ds-sr-link-hover: #000000;
    --ds-sr-footer-link: #000000;
    --ds-sr-accent: #FFFFFF;
    --ds-sr-accent-hover: #FFFFFF;
    --ds-sr-accent-edge: #666666;
    --ds-border-focus: #000000;

    /* Semantic and band trios, as app/css/print.css has them: pale tints
       that stay readable on a home or office printer, and dark edges that
       survive greyscale. Without these a reader who had chosen dark
       printed the dark-theme band text, near white, on white paper. */
    --ds-success-bg: #EDF6F0;  --ds-success-border: #1F5B39;  --ds-success-fg: #10321F;
    --ds-warning-bg: #FAF3DF;  --ds-warning-border: #6B4A00;  --ds-warning-fg: #3F2C00;
    --ds-error-bg: #FBEDEC;    --ds-error-border: #8E1B12;    --ds-error-fg: #5C110B;
    --ds-info-bg: #EDF1FA;     --ds-info-border: #1C4A9E;     --ds-info-fg: #12305F;
    --ds-band-ready-bg: #EDF6F0;   --ds-band-ready-border: #1F5B39;   --ds-band-ready-fg: #10321F;
    --ds-band-nearly-bg: #FAF3DF;  --ds-band-nearly-border: #6B4A00;  --ds-band-nearly-fg: #3F2C00;
    --ds-band-gaps-bg: #FBEFE6;    --ds-band-gaps-border: #7A3300;    --ds-band-gaps-fg: #4B1F00;
    --ds-band-not-bg: #FBEDEC;     --ds-band-not-border: #8E1B12;     --ds-band-not-fg: #5C110B;

    /* Brand ramps: ink only, never the bright gradient. The gradient fill
       and the text that sits on it are reset as a pair, the way the navy
       surface and its text are above, so a label never lands white on
       white paper, and never black on magenta when background graphics
       are printed. */
    --ds-brand-1: #000000;
    --ds-brand-2: #000000;
    --ds-brand-3: #000000;
    --ds-brand-flat: #000000;
    --ds-brand-ink-1: #000000;
    --ds-brand-ink-2: #000000;
    --ds-brand-ink-3: #000000;
    --ds-brand-ink: #000000;
    --ds-brand-gradient-ink: #FFFFFF;
    --ds-sr-brand-gradient: #FFFFFF;
    --ds-sr-btn-shadow: none;
    --ds-sr-btn-shadow-strong: none;
    --ds-brand-on-ink: #000000;

    --ds-shadow-sm: none;
    --ds-shadow-md: none;
    --ds-shadow-lg: none;
  }
}