/* ==========================================================================
   Tripo-Pulse design tokens
   P1.F2.T1 · ©2026 Vexstorm Studios – All Rights Reserved

   THE ONLY FILE IN THE PRODUCT WHERE A RAW VISUAL VALUE APPEARS.
   A colour, spacing, radius, shadow, or font literal anywhere else is a defect
   (project_code_standards.md §9.2). Components reference semantic roles only —
   never a ramp step — which is what makes dark mode a redefinition of roles
   rather than a rewrite of components.

   Structure
     1. Colour ramps          raw hues, theme-independent, never used directly
     2. Non-colour scales     type, space, radius, elevation, motion, z, opacity
     3. Semantic roles        LIGHT   :root
     4. Semantic roles        DARK    :root[data-theme="dark"]
     5. Semantic roles        DARK    @media (prefers-color-scheme: dark)
                                      :root:not([data-theme="light"])

   Blocks 4 and 5 are byte-identical by construction and
   tripo_pulse/tests/accessibility/test_token_contrast.py asserts they stay so.
   CSS cannot share one declaration block across a media query, so the only
   defence against drift is a test.

   THE BRAND SWAP POINT. Only §1's `azure` ramp and the two accent-role blocks
   carry brand identity. Replacing the nine `--tp-color-azure-*` steps with a
   different hue of equivalent lightness re-brands the entire product, because
   every accent, link, focus ring, selected state, and chart-1 series resolves
   through them. Re-run the contrast test after any such change.
   ========================================================================== */

/* ==========================================================================
   1. COLOUR RAMPS — raw hues
   Ramp steps are ordered by lightness: 50 is lightest, 975 is darkest. They are
   the vocabulary the semantic roles are written in. A component that references
   a ramp step directly has bypassed theming and is a defect.
   ========================================================================== */

:root {
  /* Pure values -------------------------------------------------------- */
  --tp-color-white: #ffffff;                    /* ramp step: absolute white */

  /* Slate — the neutral foundation. Cool, low-chroma, instrument-panel. ---- */
  --tp-color-slate-50: #f7f9fb;                 /* ramp step: lightest page ground */
  --tp-color-slate-100: #eef1f5;                /* ramp step: light well */
  --tp-color-slate-150: #e4e8ee;                /* ramp step: light divider */
  --tp-color-slate-200: #d8dee6;                /* ramp step: light hairline */
  --tp-color-slate-300: #bcc5d1;                /* ramp step: mid-light line */
  --tp-color-slate-400: #94a0b0;                /* ramp step: mid neutral */
  --tp-color-slate-500: #6d7a8c;                /* ramp step: perceivable boundary */
  --tp-color-slate-600: #55616f;                /* ramp step: dim neutral */
  --tp-color-slate-700: #3d4753;                /* ramp step: strong neutral */
  --tp-color-slate-800: #2a323c;                /* ramp step: dark hairline */
  --tp-color-slate-850: #1b232c;                /* ramp step: dark overlay ground */
  --tp-color-slate-900: #161d25;                /* ramp step: dark raised ground */
  --tp-color-slate-950: #0e1319;                /* ramp step: dark page ground */
  --tp-color-slate-975: #0a0e13;                /* ramp step: darkest well */

  /* Azure — THE BRAND HUE. Accent, links, focus, selection, chart series 1. -- */
  --tp-color-azure-100: #e8f1fd;                /* ramp step: palest brand tint */
  --tp-color-azure-200: #c6dbfb;                /* ramp step: pale brand tint */
  --tp-color-azure-300: #93bcf6;                /* ramp step: light brand */
  --tp-color-azure-400: #5b96ec;                /* ramp step: bright brand */
  --tp-color-azure-500: #3b7ede;                /* ramp step: mid brand — the one value that
                                                   clears 3:1 on every surface of BOTH themes */
  --tp-color-azure-600: #2563c4;                /* ramp step: solid brand */
  --tp-color-azure-700: #1d4fa0;                /* ramp step: deep brand */
  --tp-color-azure-800: #1a3f7d;                /* ramp step: deepest readable brand */
  --tp-color-azure-950: #12233c;                /* ramp step: brand tint on dark ground */

  /* Emerald — success and the "update" notice. ---------------------------- */
  --tp-color-emerald-100: #d9f2e4;              /* ramp step: pale success tint */
  --tp-color-emerald-300: #6fce9d;              /* ramp step: light success */
  --tp-color-emerald-400: #35ad74;              /* ramp step: bright success */
  --tp-color-emerald-500: #1f8f5c;              /* ramp step: mid success */
  --tp-color-emerald-600: #17734a;              /* ramp step: solid success */
  --tp-color-emerald-800: #0e4530;              /* ramp step: deep success text */
  --tp-color-emerald-950: #0b2a1e;              /* ramp step: success tint on dark ground */

  /* Amber — warning and the "caution" notice. ----------------------------- */
  --tp-color-amber-100: #fbeecf;                /* ramp step: pale caution tint */
  --tp-color-amber-300: #f0c463;                /* ramp step: light caution */
  --tp-color-amber-400: #dda520;                /* ramp step: bright caution */
  --tp-color-amber-500: #b87d12;                /* ramp step: mid caution */
  --tp-color-amber-600: #94620d;                /* ramp step: solid caution */
  --tp-color-amber-800: #573908;                /* ramp step: deep caution text */
  --tp-color-amber-950: #2e2008;                /* ramp step: caution tint on dark ground */

  /* Rose — danger and the "alert" notice. --------------------------------- */
  --tp-color-rose-100: #fce4e6;                 /* ramp step: pale alert tint */
  --tp-color-rose-300: #f0949e;                 /* ramp step: light alert */
  --tp-color-rose-400: #e05867;                 /* ramp step: bright alert */
  --tp-color-rose-500: #c8394a;                 /* ramp step: mid alert */
  --tp-color-rose-600: #a72a3a;                 /* ramp step: solid alert */
  --tp-color-rose-800: #661a24;                 /* ramp step: deep alert text */
  --tp-color-rose-950: #35131a;                 /* ramp step: alert tint on dark ground */

  /* Supporting hues — priority, visibility, and chart series only. --------- */
  --tp-color-violet-300: #b294f0;               /* ramp step: light violet */
  --tp-color-violet-600: #6d3fbf;               /* ramp step: solid violet */
  --tp-color-teal-300: #4fc3c9;                 /* ramp step: light teal */
  --tp-color-teal-600: #0f6d73;                 /* ramp step: solid teal */
  --tp-color-orange-300: #ec9457;               /* ramp step: light orange */
  --tp-color-orange-600: #b4551a;               /* ramp step: solid orange */
  --tp-color-fuchsia-300: #e58fce;              /* ramp step: light fuchsia */
  --tp-color-fuchsia-600: #a12a86;              /* ramp step: solid fuchsia */

  /* ========================================================================
     2. NON-COLOUR SCALES — identical in both themes
     Each is a closed, named set. An ad-hoc value anywhere in the product is a
     defect; if a value is genuinely missing, add it here rather than inline.
     ====================================================================== */

  /* Font stacks. System UI only — no web font is downloaded or bundled
     (D-009, SEC-005). ---------------------------------------------------- */
  --tp-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;             /* all prose and UI text */
  --tp-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;               /* identifiers, counts, code */

  /* Type scale. base is body copy; nothing below xs exists on purpose. ----- */
  --tp-text-xs: 0.75rem;                        /* metadata, table sub-labels */
  --tp-text-sm: 0.875rem;                       /* dense table cells, captions */
  --tp-text-base: 1rem;                         /* body copy — the default */
  --tp-text-lg: 1.125rem;                       /* lead paragraph, card title */
  --tp-text-xl: 1.375rem;                       /* section heading (h3/h2) */
  --tp-text-2xl: 1.75rem;                       /* page heading (h1) */
  --tp-text-3xl: 2.25rem;                       /* display heading, landing only */

  /* Line height. ---------------------------------------------------------- */
  --tp-leading-tight: 1.25;                     /* headings and single-line UI */
  --tp-leading-normal: 1.55;                    /* body copy */
  --tp-leading-loose: 1.75;                     /* long-form report prose */

  /* Font weight. 600 rather than 700 for "bold": system UI faces render 700
     heavier than this interface wants. ------------------------------------ */
  --tp-weight-regular: 400;                     /* body copy */
  --tp-weight-medium: 500;                      /* labels, table headers, buttons */
  --tp-weight-bold: 600;                        /* headings and emphasis */

  /* Spacing scale — 4px grid expressed in rem. ---------------------------- */
  --tp-space-1: 0.25rem;                        /* 4px  — icon gap, hairline inset */
  --tp-space-2: 0.5rem;                         /* 8px  — tight control padding */
  --tp-space-3: 0.75rem;                        /* 12px — control padding */
  --tp-space-4: 1rem;                           /* 16px — default gap */
  --tp-space-5: 1.25rem;                        /* 20px — card padding (compact) */
  --tp-space-6: 1.5rem;                         /* 24px — card padding */
  --tp-space-7: 2rem;                           /* 32px — block separation */
  --tp-space-8: 2.5rem;                         /* 40px — section separation */
  --tp-space-9: 3rem;                           /* 48px — page block rhythm */
  --tp-space-10: 4rem;                          /* 64px — major section */
  --tp-space-11: 5rem;                          /* 80px — landing rhythm */
  --tp-space-12: 6rem;                          /* 96px — largest gap that exists */

  /* Layout measures — the `space` group's named (non-scalar) members. ------ */
  --tp-space-container-max: 90rem;              /* max width of the page container */
  --tp-space-prose-max: 46rem;                  /* max width of a reading column */
  --tp-space-sidebar-width: 17rem;              /* optional secondary column */
  --tp-space-field-column-min: 15rem;           /* narrowest a column of form controls
                                                   may become before a responsive grid
                                                   drops to fewer columns */
  --tp-space-toast-width: 24rem;                /* transient toast stack width */
  --tp-space-header-height: 3.5rem;             /* sticky header height */
  --tp-space-target-min: 1.5rem;                /* 24px — ACC-006 minimum target */
  --tp-space-icon: 1rem;                        /* inline icon box */
  --tp-space-icon-lg: 1.25rem;                  /* standalone icon box */

  /* Corner radius. -------------------------------------------------------- */
  --tp-radius-sm: 3px;                          /* inputs, badges, table cells */
  --tp-radius-md: 6px;                          /* buttons, cards, notices */
  --tp-radius-lg: 10px;                         /* modals, panels */
  --tp-radius-pill: 999px;                      /* pills and toggle segments */

  /* Border widths. -------------------------------------------------------- */
  --tp-border-width-hairline: 1px;              /* every ordinary border */
  --tp-border-width-thick: 2px;                 /* focus ring, active tab, invalid field */

  /* Motion. Short and unshowy: this is an instrument panel. Every use is
     wrapped by the reduced-motion block in utilities.css (ACC-005). -------- */
  --tp-motion-duration-fast: 90ms;              /* hover/press feedback */
  --tp-motion-duration-base: 150ms;             /* disclosure, tab change */
  --tp-motion-duration-slow: 240ms;             /* modal and toast entry */
  --tp-motion-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);   /* default easing */
  --tp-motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* entry easing */

  /* Stacking order. Nothing in the product sets a bare z-index. ------------ */
  --tp-z-base: 0;                               /* in-flow content */
  --tp-z-dropdown: 100;                         /* menus and disclosures */
  --tp-z-sticky: 200;                           /* sticky header, sticky table head */
  --tp-z-modal: 400;                            /* dialog and its backdrop */
  --tp-z-toast: 500;                            /* transient toasts */
  --tp-z-tooltip: 600;                          /* tooltips — above everything */

  /* Opacity steps. -------------------------------------------------------- */
  --tp-opacity-disabled: 0.45;                  /* disabled control */
  --tp-opacity-muted: 0.7;                      /* de-emphasised decoration */
  --tp-opacity-scrim: 0.62;                     /* modal backdrop dimming */

  /* ========================================================================
     3. SEMANTIC ROLES — LIGHT THEME
     Everything below is redeclared in §4 and §5 for dark. A role declared here
     and missing there silently inherits the light value, so the contrast test
     fails on any asymmetry.
     ====================================================================== */

  /* Surfaces -------------------------------------------------------------- */
  --tp-color-surface-base: var(--tp-color-slate-50);      /* page background */
  --tp-color-surface-raised: var(--tp-color-white);       /* cards, header, menus, table */
  --tp-color-surface-sunken: var(--tp-color-slate-100);   /* wells, zebra rows, inert fields */
  --tp-color-surface-overlay: var(--tp-color-white);      /* modal and dialog surface */
  --tp-color-surface-inverse: var(--tp-color-slate-900);  /* tooltips and inverted chips */

  /* Text ------------------------------------------------------------------ */
  --tp-color-text-primary: var(--tp-color-slate-900);     /* body copy and headings */
  --tp-color-text-secondary: var(--tp-color-slate-700);   /* supporting copy, labels */
  --tp-color-text-muted: var(--tp-color-slate-600);       /* metadata, timestamps, hints */
  --tp-color-text-inverse: var(--tp-color-slate-50);      /* text on surface-inverse */
  --tp-color-text-link: var(--tp-color-azure-700);        /* hyperlinks in body copy */
  --tp-color-text-on-accent: var(--tp-color-white);       /* text on any accent-* fill */

  /* Borders --------------------------------------------------------------- */
  --tp-color-border-subtle: var(--tp-color-slate-200);    /* decorative rules and card edges;
                                                             never the sole boundary of a control */
  --tp-color-border-default: var(--tp-color-slate-500);   /* boundary of an interactive control */
  --tp-color-border-strong: var(--tp-color-slate-700);    /* emphasised boundary, table head rule */
  --tp-color-border-focus: var(--tp-color-azure-500);     /* THE focus ring — clears 3:1 on every
                                                             surface token in this theme */

  /* Accent ---------------------------------------------------------------- */
  --tp-color-accent-default: var(--tp-color-azure-600);   /* primary button, active nav */
  --tp-color-accent-hover: var(--tp-color-azure-700);     /* primary button hover */
  --tp-color-accent-active: var(--tp-color-azure-800);    /* primary button pressed */
  --tp-color-accent-subtle: var(--tp-color-azure-100);    /* selected row, active tab wash */

  /* State — success · warning · danger · info ----------------------------- */
  --tp-color-state-success: var(--tp-color-emerald-600);       /* success indicator/icon */
  --tp-color-state-success-subtle: var(--tp-color-emerald-100);/* success field background */
  --tp-color-state-success-text: var(--tp-color-emerald-800);  /* success message text */
  --tp-color-state-warning: var(--tp-color-amber-600);         /* warning indicator/icon */
  --tp-color-state-warning-subtle: var(--tp-color-amber-100);  /* warning field background */
  --tp-color-state-warning-text: var(--tp-color-amber-800);    /* warning message text */
  --tp-color-state-danger: var(--tp-color-rose-600);           /* danger indicator, invalid ring */
  --tp-color-state-danger-subtle: var(--tp-color-rose-100);    /* invalid field background */
  --tp-color-state-danger-text: var(--tp-color-rose-800);      /* validation error text */
  --tp-color-state-info: var(--tp-color-azure-600);            /* informational indicator */
  --tp-color-state-info-subtle: var(--tp-color-azure-100);     /* informational background */
  --tp-color-state-info-text: var(--tp-color-azure-800);       /* informational text */

  /* Notice — the four mandated types (UX-008). Each carries an icon and a
     visible type label as well as colour, so colour is never the signal
     (ACC-004). ------------------------------------------------------------ */
  --tp-color-notice-informational: var(--tp-color-azure-600);          /* blue  — icon and rail */
  --tp-color-notice-informational-surface: var(--tp-color-azure-100);  /* blue  — notice background */
  --tp-color-notice-informational-border: var(--tp-color-azure-600);   /* blue  — notice border */
  --tp-color-notice-informational-text: var(--tp-color-azure-800);     /* blue  — notice text */
  --tp-color-notice-update: var(--tp-color-emerald-600);               /* green — icon and rail */
  --tp-color-notice-update-surface: var(--tp-color-emerald-100);       /* green — notice background */
  --tp-color-notice-update-border: var(--tp-color-emerald-600);        /* green — notice border */
  --tp-color-notice-update-text: var(--tp-color-emerald-800);          /* green — notice text */
  --tp-color-notice-caution: var(--tp-color-amber-600);                /* yellow — icon and rail */
  --tp-color-notice-caution-surface: var(--tp-color-amber-100);        /* yellow — notice background */
  --tp-color-notice-caution-border: var(--tp-color-amber-600);         /* yellow — notice border */
  --tp-color-notice-caution-text: var(--tp-color-amber-800);           /* yellow — notice text */
  --tp-color-notice-alert: var(--tp-color-rose-600);                   /* red   — icon and rail */
  --tp-color-notice-alert-surface: var(--tp-color-rose-100);           /* red   — notice background */
  --tp-color-notice-alert-border: var(--tp-color-rose-600);            /* red   — notice border */
  --tp-color-notice-alert-text: var(--tp-color-rose-800);              /* red   — notice text */

  /* Priority — non-text indicator colours. The badge always renders the
     priority NAME as text; the colour is the rail, dot, and border only. --- */
  --tp-color-priority-low: var(--tp-color-teal-600);       /* priority rail: Low */
  --tp-color-priority-moderate: var(--tp-color-azure-600); /* priority rail: Moderate */
  --tp-color-priority-high: var(--tp-color-amber-600);     /* priority rail: High */
  --tp-color-priority-urgent: var(--tp-color-orange-600);  /* priority rail: Urgent */
  --tp-color-priority-critical: var(--tp-color-rose-600);  /* priority rail: Critical */

  /* Visibility — compartmentalisation is always visible. Text label always
     accompanies the colour. ----------------------------------------------- */
  --tp-color-visibility-normal: var(--tp-color-slate-500);      /* visibility rail: Normal */
  --tp-color-visibility-sensitive: var(--tp-color-amber-600);   /* visibility rail: Sensitive */
  --tp-color-visibility-personnel: var(--tp-color-violet-600);  /* visibility rail: Personnel */

  /* Chart series 1…8 — categorical, distinguishable by hue AND by the marker
     and dash pattern P4.F1.T4 must pair with each index (ACC-004):
       1 circle / solid      2 square / dash-6-3      3 triangle / dot-2-2
       4 diamond / dash-10-4 5 cross  / dash-4-2-1-2  6 star / dot-1-3
       7 rect-rot / dash-8-2 8 triangle-down / dash-2-6
     The pairing is a contract, not a suggestion: a colour-only series legend
     fails ACC-004 for a colour-blind reader. ------------------------------- */
  --tp-color-chart-1: var(--tp-color-azure-600);    /* series 1 — circle, solid */
  --tp-color-chart-2: var(--tp-color-emerald-600);  /* series 2 — square, dash-6-3 */
  --tp-color-chart-3: var(--tp-color-amber-600);    /* series 3 — triangle, dot-2-2 */
  --tp-color-chart-4: var(--tp-color-rose-600);     /* series 4 — diamond, dash-10-4 */
  --tp-color-chart-5: var(--tp-color-violet-600);   /* series 5 — cross, dash-4-2-1-2 */
  --tp-color-chart-6: var(--tp-color-teal-600);     /* series 6 — star, dot-1-3 */
  --tp-color-chart-7: var(--tp-color-orange-600);   /* series 7 — rect-rounded, dash-8-2 */
  --tp-color-chart-8: var(--tp-color-fuchsia-600);  /* series 8 — cross-rot, dash-2-6 */

  /* Elevation. Shadows are theme-dependent: on a dark ground a light-tinted
     shadow reads as fog, so dark uses a deeper, tighter shadow. ------------ */
  --tp-shadow-sm: 0 1px 2px rgba(14, 19, 25, 0.08);                         /* resting card */
  --tp-shadow-md: 0 2px 4px rgba(14, 19, 25, 0.08), 0 4px 12px rgba(14, 19, 25, 0.06);  /* menu, popover */
  --tp-shadow-lg: 0 8px 16px rgba(14, 19, 25, 0.12), 0 16px 40px rgba(14, 19, 25, 0.14); /* modal */
}

/* ==========================================================================
   4. SEMANTIC ROLES — DARK THEME, explicit override
   `data-theme="dark"` on <html> is written by the pre-paint resolver in the
   shells and by theme.js. It beats the system preference by design.
   ========================================================================== */

:root[data-theme="dark"] {
  /* Surfaces -------------------------------------------------------------- */
  --tp-color-surface-base: var(--tp-color-slate-950);     /* page background */
  --tp-color-surface-raised: var(--tp-color-slate-900);   /* cards, header, menus, table */
  --tp-color-surface-sunken: var(--tp-color-slate-975);   /* wells, zebra rows, inert fields */
  --tp-color-surface-overlay: var(--tp-color-slate-850);  /* modal and dialog surface */
  --tp-color-surface-inverse: var(--tp-color-slate-100);  /* tooltips and inverted chips */

  /* Text ------------------------------------------------------------------ */
  --tp-color-text-primary: var(--tp-color-slate-100);     /* body copy and headings */
  --tp-color-text-secondary: var(--tp-color-slate-300);   /* supporting copy, labels */
  --tp-color-text-muted: var(--tp-color-slate-400);       /* metadata, timestamps, hints */
  --tp-color-text-inverse: var(--tp-color-slate-900);     /* text on surface-inverse */
  --tp-color-text-link: var(--tp-color-azure-300);        /* hyperlinks in body copy */
  --tp-color-text-on-accent: var(--tp-color-slate-975);   /* text on any accent-* fill —
                                                             the darkest step, because the
                                                             pressed accent is the tightest
                                                             pairing in the whole set */

  /* Borders --------------------------------------------------------------- */
  --tp-color-border-subtle: var(--tp-color-slate-800);    /* decorative rules and card edges;
                                                             never the sole boundary of a control */
  --tp-color-border-default: var(--tp-color-slate-500);   /* boundary of an interactive control */
  --tp-color-border-strong: var(--tp-color-slate-400);    /* emphasised boundary, table head rule */
  --tp-color-border-focus: var(--tp-color-azure-500);     /* THE focus ring — clears 3:1 on every
                                                             surface token in this theme */

  /* Accent — inverted polarity: on a dark ground the accent is the light
     element and its label is dark. ---------------------------------------- */
  --tp-color-accent-default: var(--tp-color-azure-400);   /* primary button, active nav */
  --tp-color-accent-hover: var(--tp-color-azure-300);     /* primary button hover */
  --tp-color-accent-active: var(--tp-color-azure-500);    /* primary button pressed */
  --tp-color-accent-subtle: var(--tp-color-azure-950);    /* selected row, active tab wash */

  /* State — success · warning · danger · info ----------------------------- */
  --tp-color-state-success: var(--tp-color-emerald-400);       /* success indicator/icon */
  --tp-color-state-success-subtle: var(--tp-color-emerald-950);/* success field background */
  --tp-color-state-success-text: var(--tp-color-emerald-300);  /* success message text */
  --tp-color-state-warning: var(--tp-color-amber-400);         /* warning indicator/icon */
  --tp-color-state-warning-subtle: var(--tp-color-amber-950);  /* warning field background */
  --tp-color-state-warning-text: var(--tp-color-amber-300);    /* warning message text */
  --tp-color-state-danger: var(--tp-color-rose-400);           /* danger indicator, invalid ring */
  --tp-color-state-danger-subtle: var(--tp-color-rose-950);    /* invalid field background */
  --tp-color-state-danger-text: var(--tp-color-rose-300);      /* validation error text */
  --tp-color-state-info: var(--tp-color-azure-400);            /* informational indicator */
  --tp-color-state-info-subtle: var(--tp-color-azure-950);     /* informational background */
  --tp-color-state-info-text: var(--tp-color-azure-300);       /* informational text */

  /* Notice — the four mandated types (UX-008). ---------------------------- */
  --tp-color-notice-informational: var(--tp-color-azure-400);          /* blue  — icon and rail */
  --tp-color-notice-informational-surface: var(--tp-color-azure-950);  /* blue  — notice background */
  --tp-color-notice-informational-border: var(--tp-color-azure-400);   /* blue  — notice border */
  --tp-color-notice-informational-text: var(--tp-color-azure-300);     /* blue  — notice text */
  --tp-color-notice-update: var(--tp-color-emerald-400);               /* green — icon and rail */
  --tp-color-notice-update-surface: var(--tp-color-emerald-950);       /* green — notice background */
  --tp-color-notice-update-border: var(--tp-color-emerald-400);        /* green — notice border */
  --tp-color-notice-update-text: var(--tp-color-emerald-300);          /* green — notice text */
  --tp-color-notice-caution: var(--tp-color-amber-400);                /* yellow — icon and rail */
  --tp-color-notice-caution-surface: var(--tp-color-amber-950);        /* yellow — notice background */
  --tp-color-notice-caution-border: var(--tp-color-amber-400);         /* yellow — notice border */
  --tp-color-notice-caution-text: var(--tp-color-amber-300);           /* yellow — notice text */
  --tp-color-notice-alert: var(--tp-color-rose-400);                   /* red   — icon and rail */
  --tp-color-notice-alert-surface: var(--tp-color-rose-950);           /* red   — notice background */
  --tp-color-notice-alert-border: var(--tp-color-rose-400);            /* red   — notice border */
  --tp-color-notice-alert-text: var(--tp-color-rose-300);              /* red   — notice text */

  /* Priority — non-text indicator colours. -------------------------------- */
  --tp-color-priority-low: var(--tp-color-teal-300);       /* priority rail: Low */
  --tp-color-priority-moderate: var(--tp-color-azure-300); /* priority rail: Moderate */
  --tp-color-priority-high: var(--tp-color-amber-300);     /* priority rail: High */
  --tp-color-priority-urgent: var(--tp-color-orange-300);  /* priority rail: Urgent */
  --tp-color-priority-critical: var(--tp-color-rose-300);  /* priority rail: Critical */

  /* Visibility ------------------------------------------------------------ */
  --tp-color-visibility-normal: var(--tp-color-slate-400);      /* visibility rail: Normal */
  --tp-color-visibility-sensitive: var(--tp-color-amber-300);   /* visibility rail: Sensitive */
  --tp-color-visibility-personnel: var(--tp-color-violet-300);  /* visibility rail: Personnel */

  /* Chart series 1…8 — same marker and dash pairing as light. -------------- */
  --tp-color-chart-1: var(--tp-color-azure-300);    /* series 1 — circle, solid */
  --tp-color-chart-2: var(--tp-color-emerald-300);  /* series 2 — square, dash-6-3 */
  --tp-color-chart-3: var(--tp-color-amber-300);    /* series 3 — triangle, dot-2-2 */
  --tp-color-chart-4: var(--tp-color-rose-300);     /* series 4 — diamond, dash-10-4 */
  --tp-color-chart-5: var(--tp-color-violet-300);   /* series 5 — cross, dash-4-2-1-2 */
  --tp-color-chart-6: var(--tp-color-teal-300);     /* series 6 — star, dot-1-3 */
  --tp-color-chart-7: var(--tp-color-orange-300);   /* series 7 — rect-rounded, dash-8-2 */
  --tp-color-chart-8: var(--tp-color-fuchsia-300);  /* series 8 — cross-rot, dash-2-6 */

  /* Elevation — deeper and tighter, because a light-tinted shadow on a dark
     ground reads as fog rather than as lift. ------------------------------ */
  --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);                                  /* resting card */
  --tp-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.42);  /* menu, popover */
  --tp-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5);/* modal */
}

/* ==========================================================================
   5. SEMANTIC ROLES — DARK THEME, system preference
   The absence of `data-theme` means "follow the system" (project_namespaces.md
   §5.3). `:not([data-theme="light"])` is what lets an explicit light choice win
   over a dark system setting.

   This block is a byte-identical copy of §4's declarations. The contrast test
   asserts that; do not edit one without the other.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces -------------------------------------------------------------- */
    --tp-color-surface-base: var(--tp-color-slate-950);     /* page background */
    --tp-color-surface-raised: var(--tp-color-slate-900);   /* cards, header, menus, table */
    --tp-color-surface-sunken: var(--tp-color-slate-975);   /* wells, zebra rows, inert fields */
    --tp-color-surface-overlay: var(--tp-color-slate-850);  /* modal and dialog surface */
    --tp-color-surface-inverse: var(--tp-color-slate-100);  /* tooltips and inverted chips */

    /* Text ------------------------------------------------------------------ */
    --tp-color-text-primary: var(--tp-color-slate-100);     /* body copy and headings */
    --tp-color-text-secondary: var(--tp-color-slate-300);   /* supporting copy, labels */
    --tp-color-text-muted: var(--tp-color-slate-400);       /* metadata, timestamps, hints */
    --tp-color-text-inverse: var(--tp-color-slate-900);     /* text on surface-inverse */
    --tp-color-text-link: var(--tp-color-azure-300);        /* hyperlinks in body copy */
    --tp-color-text-on-accent: var(--tp-color-slate-975);   /* text on any accent-* fill —
                                                               the darkest step, because the
                                                               pressed accent is the tightest
                                                               pairing in the whole set */

    /* Borders --------------------------------------------------------------- */
    --tp-color-border-subtle: var(--tp-color-slate-800);    /* decorative rules and card edges;
                                                               never the sole boundary of a control */
    --tp-color-border-default: var(--tp-color-slate-500);   /* boundary of an interactive control */
    --tp-color-border-strong: var(--tp-color-slate-400);    /* emphasised boundary, table head rule */
    --tp-color-border-focus: var(--tp-color-azure-500);     /* THE focus ring — clears 3:1 on every
                                                               surface token in this theme */

    /* Accent ---------------------------------------------------------------- */
    --tp-color-accent-default: var(--tp-color-azure-400);   /* primary button, active nav */
    --tp-color-accent-hover: var(--tp-color-azure-300);     /* primary button hover */
    --tp-color-accent-active: var(--tp-color-azure-500);    /* primary button pressed */
    --tp-color-accent-subtle: var(--tp-color-azure-950);    /* selected row, active tab wash */

    /* State — success · warning · danger · info ----------------------------- */
    --tp-color-state-success: var(--tp-color-emerald-400);       /* success indicator/icon */
    --tp-color-state-success-subtle: var(--tp-color-emerald-950);/* success field background */
    --tp-color-state-success-text: var(--tp-color-emerald-300);  /* success message text */
    --tp-color-state-warning: var(--tp-color-amber-400);         /* warning indicator/icon */
    --tp-color-state-warning-subtle: var(--tp-color-amber-950);  /* warning field background */
    --tp-color-state-warning-text: var(--tp-color-amber-300);    /* warning message text */
    --tp-color-state-danger: var(--tp-color-rose-400);           /* danger indicator, invalid ring */
    --tp-color-state-danger-subtle: var(--tp-color-rose-950);    /* invalid field background */
    --tp-color-state-danger-text: var(--tp-color-rose-300);      /* validation error text */
    --tp-color-state-info: var(--tp-color-azure-400);            /* informational indicator */
    --tp-color-state-info-subtle: var(--tp-color-azure-950);     /* informational background */
    --tp-color-state-info-text: var(--tp-color-azure-300);       /* informational text */

    /* Notice — the four mandated types (UX-008). ---------------------------- */
    --tp-color-notice-informational: var(--tp-color-azure-400);          /* blue  — icon and rail */
    --tp-color-notice-informational-surface: var(--tp-color-azure-950);  /* blue  — notice background */
    --tp-color-notice-informational-border: var(--tp-color-azure-400);   /* blue  — notice border */
    --tp-color-notice-informational-text: var(--tp-color-azure-300);     /* blue  — notice text */
    --tp-color-notice-update: var(--tp-color-emerald-400);               /* green — icon and rail */
    --tp-color-notice-update-surface: var(--tp-color-emerald-950);       /* green — notice background */
    --tp-color-notice-update-border: var(--tp-color-emerald-400);        /* green — notice border */
    --tp-color-notice-update-text: var(--tp-color-emerald-300);          /* green — notice text */
    --tp-color-notice-caution: var(--tp-color-amber-400);                /* yellow — icon and rail */
    --tp-color-notice-caution-surface: var(--tp-color-amber-950);        /* yellow — notice background */
    --tp-color-notice-caution-border: var(--tp-color-amber-400);         /* yellow — notice border */
    --tp-color-notice-caution-text: var(--tp-color-amber-300);           /* yellow — notice text */
    --tp-color-notice-alert: var(--tp-color-rose-400);                   /* red   — icon and rail */
    --tp-color-notice-alert-surface: var(--tp-color-rose-950);           /* red   — notice background */
    --tp-color-notice-alert-border: var(--tp-color-rose-400);            /* red   — notice border */
    --tp-color-notice-alert-text: var(--tp-color-rose-300);              /* red   — notice text */

    /* Priority — non-text indicator colours. -------------------------------- */
    --tp-color-priority-low: var(--tp-color-teal-300);       /* priority rail: Low */
    --tp-color-priority-moderate: var(--tp-color-azure-300); /* priority rail: Moderate */
    --tp-color-priority-high: var(--tp-color-amber-300);     /* priority rail: High */
    --tp-color-priority-urgent: var(--tp-color-orange-300);  /* priority rail: Urgent */
    --tp-color-priority-critical: var(--tp-color-rose-300);  /* priority rail: Critical */

    /* Visibility ------------------------------------------------------------ */
    --tp-color-visibility-normal: var(--tp-color-slate-400);      /* visibility rail: Normal */
    --tp-color-visibility-sensitive: var(--tp-color-amber-300);   /* visibility rail: Sensitive */
    --tp-color-visibility-personnel: var(--tp-color-violet-300);  /* visibility rail: Personnel */

    /* Chart series 1…8 — same marker and dash pairing as light. -------------- */
    --tp-color-chart-1: var(--tp-color-azure-300);    /* series 1 — circle, solid */
    --tp-color-chart-2: var(--tp-color-emerald-300);  /* series 2 — square, dash-6-3 */
    --tp-color-chart-3: var(--tp-color-amber-300);    /* series 3 — triangle, dot-2-2 */
    --tp-color-chart-4: var(--tp-color-rose-300);     /* series 4 — diamond, dash-10-4 */
    --tp-color-chart-5: var(--tp-color-violet-300);   /* series 5 — cross, dash-4-2-1-2 */
    --tp-color-chart-6: var(--tp-color-teal-300);     /* series 6 — star, dot-1-3 */
    --tp-color-chart-7: var(--tp-color-orange-300);   /* series 7 — rect-rounded, dash-8-2 */
    --tp-color-chart-8: var(--tp-color-fuchsia-300);  /* series 8 — cross-rot, dash-2-6 */

    /* Elevation ------------------------------------------------------------- */
    --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);                                  /* resting card */
    --tp-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.42);  /* menu, popover */
    --tp-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5);/* modal */
  }
}

/* ==========================================================================
   6. COLOUR-SCHEME DECLARATION
   Tells the user agent which scheme the page is painted in, so native controls
   (scrollbars, form widgets, the address-bar tint) match. Without it a dark
   page keeps light scrollbars, which is the most visible remaining "flash".
   ========================================================================== */

:root {
  color-scheme: light;
}

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

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