/* ClearFrame Material 3 tokens — GENERATED by scripts/generate-m3-tokens.mjs.
 * Source: Google material-color-utilities (Apache-2.0), M3 Expressive (2025).
 * Seeds: primary #087cff, tertiary #238A61. Do not edit by hand. */
:root {
  color-scheme: dark;
  --md-sys-color-background: #0d0e12;
  --md-sys-color-on-background: #e3e5f0;
  --md-sys-color-surface: #0d0e12;
  --md-sys-color-surface-dim: #0d0e12;
  --md-sys-color-surface-bright: #292c34;
  --md-sys-color-surface-container-lowest: #000000;
  --md-sys-color-surface-container-low: #111318;
  --md-sys-color-surface-container: #171a1f;
  --md-sys-color-surface-container-high: #1d2026;
  --md-sys-color-surface-container-highest: #23262d;
  --md-sys-color-on-surface: #e3e5f0;
  --md-sys-color-surface-variant: #23262d;
  --md-sys-color-on-surface-variant: #a8abb5;
  --md-sys-color-inverse-surface: #faf9fe;
  --md-sys-color-inverse-on-surface: #545559;
  --md-sys-color-outline: #72757e;
  --md-sys-color-outline-variant: #454850;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #b6c6ed;
  --md-sys-color-primary: #b6c6ed;
  --md-sys-color-on-primary: #304060;
  --md-sys-color-primary-container: #425274;
  --md-sys-color-on-primary-container: #d9e3ff;
  --md-sys-color-inverse-primary: #4f5f81;
  --md-sys-color-secondary: #bec6dc;
  --md-sys-color-on-secondary: #384052;
  --md-sys-color-secondary-container: #333b4d;
  --md-sys-color-on-secondary-container: #b7bfd5;
  --md-sys-color-tertiary: #a3d1b6;
  --md-sys-color-on-tertiary: #1d4834;
  --md-sys-color-tertiary-container: #305b46;
  --md-sys-color-on-tertiary-container: #bfeed2;
  --md-sys-color-error: #fa746f;
  --md-sys-color-on-error: #490006;
  --md-sys-color-error-container: #871f21;
  --md-sys-color-on-error-container: #ff9993;
  --md-sys-color-primary-fixed: #c7d7ff;
  --md-sys-color-primary-fixed-dim: #b9c9f0;
  --md-sys-color-on-primary-fixed: #273857;
  --md-sys-color-on-primary-fixed-variant: #445476;
  --md-sys-color-secondary-fixed: #dbe2f9;
  --md-sys-color-secondary-fixed-dim: #ccd4ea;
  --md-sys-color-on-secondary-fixed: #373f51;
  --md-sys-color-on-secondary-fixed-variant: #535b6e;
  --md-sys-color-tertiary-fixed: #beedd2;
  --md-sys-color-tertiary-fixed-dim: #b1dfc4;
  --md-sys-color-on-tertiary-fixed: #1c4733;
  --md-sys-color-on-tertiary-fixed-variant: #3a644e;
  --md-sys-color-success: #4ade80;
  --md-sys-color-on-success: #00391c;
  /* ClearFrame identity roles: one blue for the mark and interactive state. */
  --cf-brand-blue: #087cff;
  --cf-brand-blue-bright: #78abff;
  --cf-brand-blue-dim: #4d91ff;
  --cf-brand-blue-hover: #a8c9ff;

  /* Type scale (Material 3) */
  --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-line: 64px; --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-line: 52px; --md-sys-typescale-display-medium-tracking: 0px;
  --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-display-small-line: 44px; --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-large-line: 40px; --md-sys-typescale-headline-large-tracking: 0px;
  --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-medium-line: 36px; --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-headline-small-line: 32px; --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-large-line: 28px; --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-line: 24px; --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-line: 20px; --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-line: 24px; --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-line: 20px; --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-line: 16px; --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-line: 20px; --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-line: 16px; --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-line: 16px; --md-sys-typescale-label-small-tracking: 0.5px;

  /* Shape scale */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Elevation */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-level3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-level4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-level5: 0 4px 4px rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);

  /* State layers */
  --md-sys-state-hover-opacity: .08;
  --md-sys-state-focus-opacity: .10;
  --md-sys-state-pressed-opacity: .10;
  --md-sys-state-dragged-opacity: .16;
  --md-sys-state-disabled-opacity: .38;
  --md-sys-state-disabled-container-opacity: .12;

  /* Motion */
  --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; --md-sys-motion-duration-long3: 550ms; --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms; --md-sys-motion-duration-extra-long2: 800ms; --md-sys-motion-duration-extra-long3: 900ms; --md-sys-motion-duration-extra-long4: 1000ms;
  --md-sys-motion-easing-linear: linear;
  --md-sys-motion-easing-standard: cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(.3,0,1,1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0,0,0,1);
  --md-sys-motion-easing-emphasized: cubic-bezier(.2,0,0,1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(.3,0,.8,.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05,.7,.1,1);
  --md-sys-motion-easing-expressive-fast: cubic-bezier(.42,1.67,.21,.90);
  --md-sys-motion-easing-expressive-default: cubic-bezier(.38,1.21,.22,1);
  --md-sys-motion-easing-expressive-slow: cubic-bezier(.34,1.05,.24,1);

  /* Legacy ClearFrame tokens mapped onto Material 3 roles. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --radius: var(--md-sys-shape-corner-medium);
  --bg: var(--md-sys-color-surface);
  --bg2: var(--md-sys-color-surface-container-low);
  --panel: var(--md-sys-color-surface-container);
  --panel2: var(--md-sys-color-surface-container-high);
  --line: var(--md-sys-color-outline-variant);
  --line-soft: var(--md-sys-color-surface-container-highest);
  --text: var(--md-sys-color-on-surface);
  --dim: var(--md-sys-color-on-surface-variant);
  --dim2: var(--md-sys-color-outline);
  --accent: var(--md-sys-color-primary);
  --accent-dim: var(--md-sys-color-primary-fixed-dim);
  --accent-soft: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
  --focus-ring: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
  --accent-ink: var(--md-sys-color-on-primary);
  --accent-hover: var(--md-sys-color-primary-fixed);
  /* Read as error-red here, but NOT what a person sees: clearframe-type.css
     remaps --md-sys-color-error onto the calm slate palette, so --danger
     resolves to on-surface-variant in the running app. Attention is carried by
     the glyph and the word, not by hue. Do not "repair" this by inlining a
     literal red — the slate remap is the intended look, and adding a literal
     here is what makes the two sheets disagree. */
  --danger: var(--md-sys-color-error);
  --ok: var(--md-sys-color-success);
  --bubble: var(--md-sys-color-surface-container-high);
  --bubble-line: var(--md-sys-color-outline-variant);
  --code-bg: var(--md-sys-color-surface-container-lowest);
  --copy-bg: var(--md-sys-color-surface-container-low);
  --scroller: var(--md-sys-color-outline-variant);
  --tool-bg: var(--md-sys-color-surface-container-low);
  --tool-hover: var(--md-sys-color-surface-container-high);
  --tool-line: var(--md-sys-color-outline-variant);
  --mono-bg: var(--md-sys-color-surface-container-lowest);
  --thumb: var(--md-sys-color-outline-variant);
  --btn-disabled: var(--md-sys-color-surface-container-highest);
  --modal-backdrop: color-mix(in srgb, var(--md-sys-color-scrim) 62%, transparent);
  --topbar-bg: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent);
}

:root[data-theme="light"] {
  color-scheme: light;
  --md-sys-color-background: #faf9fe;
  --md-sys-color-on-background: #2f323a;
  --md-sys-color-surface: #faf9fe;
  --md-sys-color-surface-dim: #d8d9e4;
  --md-sys-color-surface-bright: #faf9fe;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f3fa;
  --md-sys-color-surface-container: #ededf6;
  --md-sys-color-surface-container-high: #e7e8f1;
  --md-sys-color-surface-container-highest: #e0e2ed;
  --md-sys-color-on-surface: #2f323a;
  --md-sys-color-surface-variant: #e0e2ed;
  --md-sys-color-on-surface-variant: #5c5f68;
  --md-sys-color-inverse-surface: #0d0e12;
  --md-sys-color-inverse-on-surface: #9c9ca2;
  --md-sys-color-outline: #787a84;
  --md-sys-color-outline-variant: #afb1bc;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #495f8b;
  --md-sys-color-primary: #495f8b;
  --md-sys-color-on-primary: #f9f8ff;
  --md-sys-color-primary-container: #b0c7f9;
  --md-sys-color-on-primary-container: #29406a;
  --md-sys-color-inverse-primary: #b0c7f9;
  --md-sys-color-secondary: #575f72;
  --md-sys-color-on-secondary: #f9f8ff;
  --md-sys-color-secondary-container: #dbe2f9;
  --md-sys-color-on-secondary-container: #4a5264;
  --md-sys-color-tertiary: #306a4f;
  --md-sys-color-on-tertiary: #e6ffee;
  --md-sys-color-tertiary-container: #b3f0ce;
  --md-sys-color-on-tertiary-container: #215c42;
  --md-sys-color-error: #a83836;
  --md-sys-color-on-error: #fff7f6;
  --md-sys-color-error-container: #fa746f;
  --md-sys-color-on-error-container: #6e0a12;
  --md-sys-color-primary-fixed: #b0c7f9;
  --md-sys-color-primary-fixed-dim: #a2b9ea;
  --md-sys-color-on-primary-fixed: #122b54;
  --md-sys-color-on-primary-fixed-variant: #324973;
  --md-sys-color-secondary-fixed: #dbe2f9;
  --md-sys-color-secondary-fixed-dim: #ccd4ea;
  --md-sys-color-on-secondary-fixed: #373f51;
  --md-sys-color-on-secondary-fixed-variant: #535b6e;
  --md-sys-color-tertiary-fixed: #b3f0ce;
  --md-sys-color-tertiary-fixed-dim: #a5e2c0;
  --md-sys-color-on-tertiary-fixed: #064930;
  --md-sys-color-on-tertiary-fixed-variant: #2c664b;
  --md-sys-color-success: #1b6b3a;
  --md-sys-color-on-success: #ffffff;
  /* ClearFrame identity roles: one blue for the mark and interactive state. */
  --cf-brand-blue: #087cff;
  --cf-brand-blue-bright: #087cff;
  --cf-brand-blue-dim: #0867d9;
  --cf-brand-blue-hover: #0752e7;
}