/* Tyde design tokens · dark theme (default) · v0.20 §10.14 semantic palette, type, spacing, geometry and motion
   Semantic names follow the F7 token grammar: --tyde-<role>-<name>.
   Light theme will redefine the same names; components only ever use these. */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Brand primitives (F7 data language) — reference only, not used directly by components */
  --tyde-brand-deep-teal: #03363D;
  --tyde-brand-green: #3F6B22;
  --tyde-brand-signal: #C7E993;
  --tyde-brand-neutral: #6B7972;
  --tyde-brand-warning: #B6872B;
  --tyde-brand-risk: #B94A48;

  /* Surfaces */
  --tyde-surface-canvas: #020809;
  --tyde-surface-navigation: #020A0C;
  --tyde-surface-base: #061619;
  --tyde-surface-raised: #05262B;
  --tyde-surface-overlay: #071B1F;
  --tyde-surface-subtle: #071C20;
  --tyde-surface-selected: #06262B;
  --tyde-surface-field: #051A1E;
  --tyde-surface-sunken: #040F11;  /* sticky columns, empty milestone fill */
  --tyde-surface-scrim: rgba(1, 6, 7, 0.64);
  --tyde-surface-ambient: radial-gradient(1100px 560px at 26% -14%, rgba(3, 54, 61, 0.80), rgba(3, 54, 61, 0) 68%), radial-gradient(900px 520px at 96% 118%, rgba(3, 54, 61, 0.36), rgba(3, 54, 61, 0) 70%), radial-gradient(700px 420px at 8% 104%, rgba(3, 54, 61, 0.22), rgba(3, 54, 61, 0) 70%);
  --tyde-surface-ambient-board: radial-gradient(1200px 700px at 22% 0%, rgba(3, 54, 61, 0.85), rgba(3, 54, 61, 0) 70%), radial-gradient(1100px 800px at 90% 38%, rgba(3, 54, 61, 0.50), rgba(3, 54, 61, 0) 70%), radial-gradient(1200px 900px at 10% 72%, rgba(3, 54, 61, 0.45), rgba(3, 54, 61, 0) 70%), radial-gradient(1000px 700px at 85% 100%, rgba(3, 54, 61, 0.40), rgba(3, 54, 61, 0) 70%);  /* tall documentation boards only */

  /* Navigation scope · the rail keeps the deep-teal field in every theme */
  --tyde-nav-surface: var(--tyde-surface-scrim-gradient);
  --tyde-nav-text: #E7EFEC;
  --tyde-nav-text-secondary: #A8BAB4;
  --tyde-nav-text-muted: #7E918B;
  --tyde-nav-icon: #6B7972;
  --tyde-nav-icon-active: #C7E993;
  --tyde-nav-hover: rgba(199, 233, 147, 0.06);
  --tyde-nav-on: rgba(3, 54, 61, 0.55);
  --tyde-nav-marker: #C7E993;
  --tyde-nav-signal: #C7E993;
  --tyde-nav-context-fill: rgba(3, 54, 61, 0.42);
  --tyde-nav-avatar: #06262B;
  --tyde-nav-border: #557479;
  --tyde-nav-divider: #0F2429;
  --tyde-nav-overlay: #071B1F;
  --tyde-nav-edge: transparent;

  /* Text */
  --tyde-text-primary: #E7EFEC;
  --tyde-text-secondary: #A8BAB4;
  --tyde-text-muted: #7E918B;
  --tyde-text-on-action: #031215;
  --tyde-text-on-destructive: #1A0707;
  --tyde-text-risk: #E88580;
  --tyde-text-warning: #D9AE55;
  --tyde-text-confirmed: #8DBB5E;
  --tyde-text-signal: #C7E993;
  --tyde-text-label: #8A9C96;      /* field labels, axis labels, tertiary icons · 6.5:1 on canvas */
  --tyde-text-prose: #C9D6D1;      /* running text in explanations and evidence */

  /* Borders and dividers */
  --tyde-border-subtle: #0F2429;
  --tyde-border-default: #16353A;
  --tyde-border-control: #557479;
  --tyde-border-strong: #8A9C96;
  --tyde-border-raised: rgba(30, 61, 66, 0.6);

  /* Actions */
  --tyde-action-primary: #E7EFEC;
  --tyde-action-primary-hover: #FFFFFF;
  --tyde-action-primary-pressed: #CFDAD5;
  --tyde-action-primary-disabled: #2A3E42;
  --tyde-action-secondary-hover: #08242A;
  --tyde-action-quiet-hover: rgba(199, 233, 147, 0.06);
  --tyde-action-quiet-active: rgba(199, 233, 147, 0.08);
  --tyde-action-raised-fill: rgba(3, 54, 61, 0.42);
  --tyde-action-seg-track: rgba(3, 54, 61, 0.30);
  --tyde-action-rail-on: rgba(3, 54, 61, 0.55);
  --tyde-glow-signal: rgba(199, 233, 147, 0.40);
  --tyde-surface-scrim-gradient: linear-gradient(180deg, rgba(2, 10, 12, 0.72), rgba(2, 8, 9, 0.92));
  --tyde-entry-fill: var(--tyde-action-raised-fill);      /* entry points that invite typing: Ask Tyde prompt, list search */
  --tyde-entry-edge: var(--tyde-elevation-raised);
  --tyde-elevation-sheet: inset 1px 0 0 var(--tyde-border-subtle);   /* inspector and persistent side regions */
  --tyde-action-seg-on: var(--tyde-surface-selected);
  --tyde-action-seg-on-shadow: none;
  --tyde-surface-field-gradient: none;   /* daylight: brighter at the top, deeper at the base */
  --tyde-action-landing: rgba(199, 233, 147, 0.18);
  --tyde-action-destructive: #E88580;
  --tyde-action-destructive-hover: #F0A19D;

  /* Focus, selection, signal */
  --tyde-focus-ring: #C7E993;
  --tyde-selection-marker: #C7E993;
  --tyde-signal-now: #C7E993;

  /* States (fills and edges; text uses --tyde-text-*) */
  --tyde-state-risk: #B94A48;
  --tyde-state-risk-fill: rgba(185, 74, 72, 0.12);
  --tyde-state-risk-edge: rgba(185, 74, 72, 0.40);
  --tyde-state-warning: #B6872B;
  --tyde-state-warning-fill: rgba(182, 135, 43, 0.10);
  --tyde-state-warning-edge: rgba(182, 135, 43, 0.40);
  --tyde-state-confirmed-fill: rgba(63, 107, 34, 0.18);
  --tyde-state-confirmed-edge: rgba(91, 143, 54, 0.50);
  --tyde-state-info-fill: rgba(3, 54, 61, 0.45);
  --tyde-state-info-edge: rgba(85, 116, 121, 0.55);

  /* Icons */
  --tyde-icon-default: #A8BAB4;
  --tyde-icon-muted: #6B7972;
  --tyde-icon-active: #C7E993;

  /* Data */
  --tyde-data-actual: #3F6B22;
  --tyde-data-forecast: #6E9B45;
  --tyde-data-reference: #E7EFEC;
  --tyde-data-partial: #A8BAB4;
  --tyde-data-track: #10292E;
  --tyde-data-planned: #284A26;    /* scheduled, not started */
  --tyde-data-baseline: #557479;   /* baseline ghost under the plan bar · 3.6:1 */
  --tyde-data-proposed-edge: #A8BAB4;
  /* D03 (owner, 1 Oct 2026): app-wide data / progress green. Positive, progress or data-state meaning only; never decoration. Pages never hardcode the raw value. */
  --tyde-data-progress: #8FDDAA;
  --tyde-data-cat-1: #3F6B22;
  --tyde-data-cat-2: #6E9B45;
  --tyde-data-cat-3: #A7C97A;
  --tyde-data-cat-4: #3E8A8F;
  --tyde-data-cat-5: #8A9C96;
  --tyde-data-seq-1: #10292E;
  --tyde-data-seq-2: #1F4A2E;
  --tyde-data-seq-3: #3F6B22;
  --tyde-data-seq-4: #6E9B45;
  --tyde-data-seq-5: #A7C97A;
  --tyde-data-div-low: #3E8A8F;
  --tyde-data-div-mid: #2A3E42;
  --tyde-data-div-high: #6E9B45;

  /* Typography */
  --tyde-font-sans: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --tyde-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --tyde-type-display: 400 32px/1.12 var(--tyde-font-sans);
  --tyde-type-title: 400 24px/1.25 var(--tyde-font-sans);
  --tyde-type-heading: 500 17px/1.35 var(--tyde-font-sans);
  --tyde-type-dense-heading: 500 14px/1.4 var(--tyde-font-sans);
  --tyde-type-body: 400 14px/1.5 var(--tyde-font-sans);
  --tyde-type-ui: 400 13px/1.45 var(--tyde-font-sans);
  --tyde-type-meta: 400 12px/1.45 var(--tyde-font-sans);
  --tyde-type-mono: 400 12px/1.4 var(--tyde-font-mono);
  --tyde-type-numeric-primary: 400 30px/1.1 var(--tyde-font-sans);
  --tyde-type-numeric-secondary: 400 18px/1.2 var(--tyde-font-sans);
  --tyde-tracking-display: -0.03em;
  --tyde-tracking-title: -0.02em;

  /* Spacing (4px foundation) */
  --tyde-space-4: 4px;  --tyde-space-8: 8px;  --tyde-space-12: 12px; --tyde-space-16: 16px; --tyde-space-20: 20px;
  --tyde-space-24: 24px; --tyde-space-32: 32px; --tyde-space-40: 40px; --tyde-space-48: 48px; --tyde-space-64: 64px;

  /* Radii */
  --tyde-radius-control: 6px;
  --tyde-radius-object: 8px;
  --tyde-radius-surface: 10px;
  --tyde-radius-overlay: 12px;
  --tyde-radius-full: 999px;

  /* Elevation (only for floating / transient surfaces) */
  --tyde-elevation-subtle: 0 0 0 1px var(--tyde-border-subtle);
  --tyde-elevation-raised: inset 0 0 0 1px var(--tyde-border-raised), inset 0 1px 0 rgba(199, 233, 147, 0.05);
  --tyde-shadow-toast: rgba(0, 0, 0, 0.45);
  --tyde-skeleton-a: #08191C;
  --tyde-skeleton-b: #0C2226;
  --tyde-elevation-floating: 0 0 0 1px var(--tyde-border-default), 0 24px 60px rgba(0, 0, 0, 0.6);

  /* Motion */
  --tyde-motion-immediate: 110ms;
  --tyde-motion-hover: 140ms;
  --tyde-motion-popover: 170ms;
  --tyde-motion-state: 200ms;
  --tyde-motion-spatial: 240ms;
  --tyde-motion-major: 300ms;
  --tyde-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tyde-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Dimensions */
  --tyde-size-icon-dense: 16px;
  --tyde-size-icon-control: 18px;
  --tyde-size-icon-global: 20px;
  --tyde-size-control: 34px;
  --tyde-size-control-compact: 30px;
  --tyde-size-row-min: 44px;
  --tyde-size-row-max: 50px;
  --tyde-size-marker: 2px;
  --tyde-size-inspector: 420px;
  --tyde-size-header: 56px;
  /* v0.20 §10.14.5 horizontal top shell: 64px desktop, 56px mobile anchor. The shell is deep teal in every theme. */
  --tyde-size-shell: 64px;
  --tyde-size-shell-mobile: 56px;
  --tyde-size-touch: 44px;
  --tyde-shell-surface: linear-gradient(180deg, #06424A 0%, #03363D 52%, #032E34 100%);
  --tyde-shell-text: #E7EFEC;
  --tyde-shell-text-secondary: #A8BAB4;
  --tyde-shell-hover: rgba(199, 233, 147, 0.08);
  --tyde-shell-marker: #C7E993;
  --tyde-shell-divider: rgba(231, 239, 236, 0.12);
  --tyde-shell-field: rgba(2, 8, 9, 0.28);
}

/* Navigation scope: inside the rail the general tokens resolve to the nav set, so rail markup needs no special classes */
.ty-nav { background: var(--tyde-nav-surface); box-shadow: inset -1px 0 0 var(--tyde-nav-edge); color: var(--tyde-nav-text);
  --tyde-text-primary: var(--tyde-nav-text); --tyde-text-secondary: var(--tyde-nav-text-secondary); --tyde-text-muted: var(--tyde-nav-text-muted); --tyde-text-label: var(--tyde-nav-text-secondary);
  --tyde-icon-muted: var(--tyde-nav-icon); --tyde-icon-default: var(--tyde-nav-text-secondary); --tyde-icon-active: var(--tyde-nav-icon-active);
  --tyde-action-quiet-hover: var(--tyde-nav-hover); --tyde-action-quiet-active: var(--tyde-nav-on); --tyde-action-rail-on: var(--tyde-nav-on); --tyde-action-raised-fill: var(--tyde-nav-context-fill);
  --tyde-surface-selected: var(--tyde-nav-avatar); --tyde-border-control: var(--tyde-nav-border); --tyde-border-subtle: var(--tyde-nav-divider); --tyde-selection-marker: var(--tyde-nav-marker); --tyde-text-signal: var(--tyde-nav-signal); --tyde-focus-ring: var(--tyde-nav-marker);
  --tyde-surface-navigation: transparent; --tyde-surface-overlay: var(--tyde-nav-overlay); --tyde-surface-field: var(--tyde-nav-context-fill); --tyde-elevation-raised: none; --tyde-surface-scrim-gradient: transparent; }

@media (prefers-reduced-motion: reduce) {
  :root, [data-theme="dark"] {
    --tyde-motion-immediate: 0ms; --tyde-motion-hover: 0ms; --tyde-motion-popover: 0ms;
    --tyde-motion-state: 0ms; --tyde-motion-spatial: 0ms; --tyde-motion-major: 0ms;
  }
}
/* Tyde design tokens · light theme · FROZEN 29 Sep 2026
   Redefines every semantic name from tyde-dark.css. Components never change.
   Load after tyde-dark.css and set data-theme="light" on the root. */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces · a cool field tinted by deep teal, never pure white behind data */
  --tyde-surface-canvas: #EEF5F2;
  --tyde-surface-navigation: #03363D;   /* the rail is deep teal in every theme; see the navigation scope */
  --tyde-surface-base: #FFFFFF;
  --tyde-surface-raised: #E3EEEA;
  --tyde-surface-overlay: #FFFFFF;
  --tyde-surface-subtle: #E2ECE9;
  --tyde-surface-selected: #D4E8E3;
  --tyde-surface-field: #FFFFFF;
  --tyde-surface-sunken: #E1EAE7;
  --tyde-surface-scrim: rgba(3, 54, 61, 0.34);
  --tyde-surface-ambient: radial-gradient(1000px 520px at 24% -12%, rgba(3, 54, 61, 0.22), rgba(3, 54, 61, 0) 68%), radial-gradient(760px 420px at 74% -10%, rgba(199, 233, 147, 0.38), rgba(199, 233, 147, 0) 70%), radial-gradient(900px 520px at 96% 118%, rgba(3, 54, 61, 0.10), rgba(3, 54, 61, 0) 70%), radial-gradient(700px 420px at 8% 104%, rgba(3, 54, 61, 0.07), rgba(3, 54, 61, 0) 70%);
  --tyde-surface-ambient-board: radial-gradient(1200px 700px at 22% 0%, rgba(3, 54, 61, 0.15), rgba(3, 54, 61, 0) 70%), radial-gradient(900px 500px at 78% 2%, rgba(199, 233, 147, 0.22), rgba(199, 233, 147, 0) 70%), radial-gradient(1100px 800px at 90% 38%, rgba(3, 54, 61, 0.07), rgba(3, 54, 61, 0) 70%), radial-gradient(1200px 900px at 10% 72%, rgba(3, 54, 61, 0.07), rgba(3, 54, 61, 0) 70%), radial-gradient(1000px 700px at 85% 100%, rgba(3, 54, 61, 0.06), rgba(3, 54, 61, 0) 70%);  /* tall documentation boards only */

  /* Navigation scope · deep teal carries the brand on light */
  --tyde-nav-surface: linear-gradient(180deg, #06424A 0%, #03363D 38%, #032E34 100%);
  --tyde-nav-text: #EEF5F2;
  --tyde-nav-text-secondary: #BBD1CD;
  --tyde-nav-text-muted: #8FB0AB;
  --tyde-nav-icon: #7FA39E;
  --tyde-nav-icon-active: #C7E993;
  --tyde-nav-hover: rgba(199, 233, 147, 0.07);
  --tyde-nav-on: rgba(199, 233, 147, 0.13);
  --tyde-nav-marker: #C7E993;
  --tyde-nav-signal: #C7E993;
  --tyde-nav-context-fill: rgba(255, 255, 255, 0.07);
  --tyde-nav-avatar: rgba(199, 233, 147, 0.18);
  --tyde-nav-border: rgba(255, 255, 255, 0.30);
  --tyde-nav-divider: rgba(255, 255, 255, 0.12);
  --tyde-nav-overlay: rgba(255, 255, 255, 0.08);
  --tyde-nav-edge: rgba(3, 54, 61, 0.35);

  /* Text · ink carries deep teal */
  --tyde-text-primary: #06171A;
  --tyde-text-secondary: #2E4649;
  --tyde-text-muted: #526669;
  --tyde-text-label: #4E6467;
  --tyde-text-prose: #16302F;
  --tyde-text-on-action: #FFFFFF;
  --tyde-text-on-destructive: #FFFFFF;
  --tyde-text-risk: #A83A38;
  --tyde-text-warning: #7D5A12;
  --tyde-text-confirmed: #33621A;
  --tyde-text-signal: #2F6516;

  /* Borders and dividers */
  --tyde-border-subtle: #D3DEDB;
  --tyde-border-default: #B7C7C3;
  --tyde-border-control: #5F7877;
  --tyde-border-strong: #4E6467;
  --tyde-border-raised: rgba(3, 54, 61, 0.24);

  /* Actions · primary is deep teal on light */
  --tyde-action-primary: #03363D;
  --tyde-action-primary-hover: #0A4750;
  --tyde-action-primary-pressed: #022A30;
  --tyde-action-primary-disabled: #C3CFCD;
  --tyde-action-secondary-hover: #E3ECEA;
  --tyde-action-quiet-hover: rgba(3, 54, 61, 0.06);
  --tyde-action-quiet-active: rgba(3, 54, 61, 0.10);
  --tyde-action-raised-fill: rgba(3, 54, 61, 0.10);
  --tyde-action-seg-track: rgba(3, 54, 61, 0.11);
  --tyde-action-rail-on: rgba(3, 54, 61, 0.10);
  --tyde-glow-signal: rgba(63, 122, 30, 0.35);
  --tyde-surface-scrim-gradient: linear-gradient(180deg, rgba(232, 239, 237, 0.72), rgba(241, 245, 244, 0.94));
  --tyde-entry-fill: #FFFFFF;      /* entry points that invite typing: Ask Tyde prompt, list search */
  --tyde-entry-edge: inset 0 0 0 1px var(--tyde-border-default);
  --tyde-elevation-sheet: inset 1px 0 0 rgba(3, 54, 61, 0.10), -12px 0 32px rgba(3, 54, 61, 0.08);   /* inspector and persistent side regions */
  --tyde-action-seg-on: #FFFFFF;
  --tyde-action-seg-on-shadow: 0 1px 2px rgba(3, 54, 61, 0.14), 0 0 0 1px rgba(3, 54, 61, 0.10);
  --tyde-surface-field-gradient: linear-gradient(180deg, #F3F7F6 0%, #EAF0EF 46%, #E1EAE8 100%);   /* daylight: brighter at the top, deeper at the base */
  --tyde-action-landing: rgba(63, 122, 30, 0.18);
  --tyde-action-destructive: #B94A48;
  --tyde-action-destructive-hover: #A83A38;

  /* Focus, selection, signal · mint has no contrast on light, so signal becomes Tyde green */
  --tyde-focus-ring: #2F6516;
  --tyde-selection-marker: #2F6516;
  --tyde-signal-now: #3F7A1E;

  /* States */
  --tyde-state-risk: #B94A48;
  --tyde-state-risk-fill: rgba(185, 74, 72, 0.09);
  --tyde-state-risk-edge: rgba(185, 74, 72, 0.45);
  --tyde-state-warning: #9A6F1C;
  --tyde-state-warning-fill: rgba(182, 135, 43, 0.11);
  --tyde-state-warning-edge: rgba(182, 135, 43, 0.50);
  --tyde-state-confirmed-fill: rgba(63, 122, 30, 0.10);
  --tyde-state-confirmed-edge: rgba(63, 107, 34, 0.45);
  --tyde-state-info-fill: rgba(3, 54, 61, 0.06);
  --tyde-state-info-edge: rgba(3, 54, 61, 0.28);

  /* Icons */
  --tyde-icon-default: #3D5457;
  --tyde-icon-muted: #5E7477;
  --tyde-icon-active: #3F7A1E;

  /* Data */
  --tyde-data-actual: #145E66;
  --tyde-data-forecast: #3A9099;
  --tyde-data-reference: #06171A;
  --tyde-data-partial: #3D5457;
  --tyde-data-track: #D3DEDB;
  --tyde-data-planned: #BFDBDC;
  --tyde-data-baseline: #6A8281;
  --tyde-data-proposed-edge: #3D5457;
  /* D03: same name as dark. PROVISIONAL light value (existing light data token) until light pages are designed and the mint is tuned for the light canvas. */
  --tyde-data-progress: #2F7A43;
  --tyde-data-cat-1: #145E66;
  --tyde-data-cat-2: #3A9099;
  --tyde-data-cat-3: #3F7A1E;
  --tyde-data-cat-4: #9A6F1C;
  --tyde-data-cat-5: #6B7972;
  --tyde-data-seq-1: #D3DEDB;
  --tyde-data-seq-2: #BFDBDC;
  --tyde-data-seq-3: #7BBAC0;
  --tyde-data-seq-4: #3A9099;
  --tyde-data-seq-5: #145E66;
  --tyde-data-div-low: #3A9099;
  --tyde-data-div-mid: #D3DEDB;
  --tyde-data-div-high: #3F7A1E;

  /* Elevation and loading */
  --tyde-elevation-subtle: 0 0 0 1px var(--tyde-border-subtle);
  --tyde-elevation-raised: inset 0 0 0 1px var(--tyde-border-raised), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --tyde-elevation-floating: 0 0 0 1px rgba(3, 54, 61, 0.14), 0 24px 56px rgba(3, 54, 61, 0.20), 0 2px 6px rgba(3, 54, 61, 0.08);
  --tyde-shadow-toast: rgba(3, 54, 61, 0.22);
  --tyde-skeleton-a: #DCE5E2;
  --tyde-skeleton-b: #E9F0EE;
}