/*
 * Theme-specific semantic color and shadow values.
 *
 * These paired values are implementation details. Components consume the
 * unsuffixed semantic aliases activated in themes.css.
 */

:root {
  --sigvelo-color-canvas-light: #f7f7f4;
  --sigvelo-color-canvas-dark: #171716;
  /* Sigvelo product planes: warm paper in light mode, neutral charcoal in dark.
     Elevation separates neutral planes without white or blue panel fills.
     Source and mappings: react-components/docs/sigvelo-brand.md. */
  --sigvelo-color-surface-under-light: #f0f0ed;
  --sigvelo-color-surface-under-dark: #20201e;
  --sigvelo-color-surface-light: #f7f7f4;
  --sigvelo-color-surface-dark: #171716;
  --sigvelo-color-text-light: #24241f;
  --sigvelo-color-text-dark: #f3f7f9;
  --sigvelo-color-text-muted-light: #595d57;
  --sigvelo-color-text-muted-dark: #b2c1c9;
  /* Two quieter rungs below muted, measured against the owning surface rather
     than picked off the legacy neutral ramp.
     subtle: de-emphasized label text, still holds ~4.5:1 against its surface.
     faint: icons and resting affordances only — it clears the 3:1 needed for
     a graphic, not the 4.5:1 needed for body copy. */
  --sigvelo-color-text-subtle-light: #656a64;
  --sigvelo-color-text-subtle-dark: #9dafb9;
  --sigvelo-color-text-faint-light: #7b817b;
  --sigvelo-color-text-faint-dark: #7d929f;
  /* Data-series colors are measured against their owning surface so chart
     marks clear WCAG 1.4.11 in either theme. The weakest pair is 5.17:1 on
     the light surface and 6.60:1 on the dark surface. */
  --sigvelo-color-viz-series-1-light: #2563eb;
  --sigvelo-color-viz-series-1-dark: #60a5fa;
  --sigvelo-color-viz-series-2-light: #0f766e;
  --sigvelo-color-viz-series-2-dark: #2dd4bf;
  --sigvelo-color-viz-series-3-light: #c2410c;
  --sigvelo-color-viz-series-3-dark: #fb923c;
  --sigvelo-color-viz-series-4-light: #7e22ce;
  --sigvelo-color-viz-series-4-dark: #c084fc;
  --sigvelo-color-viz-series-5-light: #be123c;
  --sigvelo-color-viz-series-5-dark: #fb7185;
  --sigvelo-color-viz-series-6-light: #3f6212;
  --sigvelo-color-viz-series-6-dark: #a3e635;
  /* Elevated controls, composers, and menus carry a restrained Sigvelo blue
     tint. Large workspaces use surface so their canvas stays consistent
     between split and compact layouts. */
  --sigvelo-color-surface-raised-light: #f3f6f6;
  --sigvelo-color-surface-raised-dark: #12232d;
  --sigvelo-color-surface-sunken-light: #f0f0ed;
  --sigvelo-color-surface-sunken-dark: #20201e;
  /* Translucent counterpart of surface-raised, for panels that blur what is
     scrolling underneath. Pair with --sigvelo-glass-filter, and fall back to
     surface-raised where backdrop-filter is unavailable. */
  --sigvelo-color-surface-glass-light: color-mix(
    in oklab,
    var(--sigvelo-color-surface-raised-light),
    transparent 20%
  );
  --sigvelo-color-surface-glass-dark: color-mix(
    in oklab,
    var(--sigvelo-color-surface-raised-dark),
    transparent 20%
  );
  --sigvelo-color-focus-light: var(--sigvelo-color-primary-bg-light);
  --sigvelo-color-focus-dark: var(--sigvelo-color-primary-bg-dark);
  --sigvelo-focus-ring-light: var(--sigvelo-border-style) var(--sigvelo-focus-width)
    var(--sigvelo-color-focus-light);
  --sigvelo-focus-ring-dark: var(--sigvelo-border-style) var(--sigvelo-focus-width)
    var(--sigvelo-color-focus-dark);
  /* Paired with --sigvelo-glass-filter on dialog scrims. A pale tint and 1px
     blur recede the page without turning it into a dark or frosted sheet. */
  --sigvelo-color-backdrop-light: rgb(240 240 237 / 65%);
  --sigvelo-color-backdrop-dark: rgb(17 17 16 / 65%);
  --sigvelo-color-selection-bg-light: #deded8;
  --sigvelo-color-selection-bg-dark: #3b3b37;
  --sigvelo-color-selection-text-light: var(--sigvelo-color-text-light);
  --sigvelo-color-selection-text-dark: var(--sigvelo-color-text-dark);
  /* One color for both themes. What differs between light and dark is how much
     of it each stack mixes in, and that lives in the stacks below. */
  --sigvelo-color-shadow: black;

  /* Elevation stacks. Each begins with the hairline ring below — a sub-pixel
     edge that survives zoom and keeps a shadowed surface from dissolving into
     the canvas when the shadow itself is nearly invisible. */
  --sigvelo-elevation-hairline-light: 0 0 0 var(--sigvelo-border-width-hairline)
    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
  --sigvelo-elevation-hairline-dark: 0 0 0 var(--sigvelo-border-width-hairline)
    color-mix(in oklab, transparent, white 10%);
  /* bar: chrome rows sitting atop scrolling content. A directional step down
     rather than a ring, so the surface's own edge stays its only outline;
     pair it with a border-block-end hairline. */
  --sigvelo-elevation-bar-light: 0 2px 4px
    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 4%);
  --sigvelo-elevation-bar-dark: 0 2px 4px
    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 30%);
  /* raised: rows, cards, anything one step off the page. A broad, low-alpha
     shadow separates the surface without drawing a dark line beneath it. */
  --sigvelo-elevation-raised-light:
    var(--sigvelo-elevation-hairline-light),
    0 0 15px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 3%);
  --sigvelo-elevation-raised-dark:
    var(--sigvelo-elevation-hairline-dark),
    0 0 15px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 3%);
  /* floating: composers and toolbars that hover over scrolling content. The
     wide spread-free ambient layer is what reads as "off the page" rather
     than "outlined". */
  --sigvelo-elevation-floating-light:
    var(--sigvelo-elevation-hairline-light),
    0 3px 7.5px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 4%),
    0 0 20px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
  --sigvelo-elevation-floating-dark:
    var(--sigvelo-elevation-hairline-dark),
    0 3px 7.5px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 32%),
    0 0 20px color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 28%);
  /* overlay: popovers, menus, dialogs — detached from the page entirely. */
  --sigvelo-elevation-overlay-light:
    var(--sigvelo-elevation-hairline-light), 0 10px 28px rgb(36 36 31 / 12%);
  --sigvelo-elevation-overlay-dark:
    var(--sigvelo-elevation-hairline-dark), 0 10px 28px rgb(0 0 0 / 32%);
  --sigvelo-color-primary-bg-subtle-light: #e4f0f5;
  --sigvelo-color-primary-bg-subtle-dark: #123443;
  --sigvelo-color-primary-bg-muted-light: #deded8;
  --sigvelo-color-primary-bg-muted-dark: #3b3b37;
  --sigvelo-color-primary-bg-light: #006d9f;
  --sigvelo-color-primary-bg-dark: #8bd9f0;
  --sigvelo-color-primary-bg-strong-light: #00577f;
  --sigvelo-color-primary-bg-strong-dark: #b7eafa;
  --sigvelo-color-primary-bg-stronger-light: #004664;
  --sigvelo-color-primary-bg-stronger-dark: #daf5ff;
  --sigvelo-color-primary-text-on-subtle-light: #00577f;
  --sigvelo-color-primary-text-on-subtle-dark: #b7eafa;
  --sigvelo-color-primary-text-on-bg-light: #ffffff;
  --sigvelo-color-primary-text-on-bg-dark: #061118;
  --sigvelo-color-primary-text-on-strong-light: #ffffff;
  --sigvelo-color-primary-text-on-strong-dark: #061118;
  --sigvelo-color-primary-text-light: #00658f;
  --sigvelo-color-primary-text-dark: #63c7e8;
  --sigvelo-color-primary-border-subtle-light: rgb(0 109 159 / 18%);
  --sigvelo-color-primary-border-subtle-dark: rgb(99 199 232 / 22%);
  --sigvelo-color-primary-border-muted-light: rgb(0 109 159 / 35%);
  --sigvelo-color-primary-border-muted-dark: rgb(99 199 232 / 38%);
  --sigvelo-color-primary-border-light: #006d9f;
  --sigvelo-color-primary-border-dark: #63c7e8;
  --sigvelo-color-neutral-bg-subtle-light: rgb(36 36 31 / 5%);
  --sigvelo-color-neutral-bg-subtle-dark: rgb(247 247 244 / 7%);
  --sigvelo-color-neutral-bg-muted-light: #e4e4df;
  --sigvelo-color-neutral-bg-muted-dark: #343431;
  --sigvelo-color-neutral-bg-light: #62665f;
  --sigvelo-color-neutral-bg-dark: #b2c1c9;
  --sigvelo-color-neutral-bg-strong-light: #3c4546;
  --sigvelo-color-neutral-bg-strong-dark: #e0edf2;
  --sigvelo-color-neutral-bg-stronger-light: #24241f;
  --sigvelo-color-neutral-bg-stronger-dark: #f3f7f9;
  --sigvelo-color-neutral-text-on-subtle-light: #24241f;
  --sigvelo-color-neutral-text-on-subtle-dark: #f3f7f9;
  --sigvelo-color-neutral-text-on-bg-light: #ffffff;
  --sigvelo-color-neutral-text-on-bg-dark: #171716;
  --sigvelo-color-neutral-text-on-strong-light: #ffffff;
  --sigvelo-color-neutral-text-on-strong-dark: #171716;
  --sigvelo-color-neutral-text-light: #62665f;
  --sigvelo-color-neutral-text-dark: #b2c1c9;
  --sigvelo-color-neutral-border-subtle-light: rgb(36 36 31 / 13%);
  --sigvelo-color-neutral-border-subtle-dark: rgb(247 247 244 / 16%);
  --sigvelo-color-neutral-border-muted-light: rgb(36 36 31 / 20%);
  --sigvelo-color-neutral-border-muted-dark: rgb(247 247 244 / 28%);
  --sigvelo-color-neutral-border-light: #62665f;
  --sigvelo-color-neutral-border-dark: #b2c1c9;
  --sigvelo-color-success-bg-subtle-light: var(--sigvelo-color-success-100);
  --sigvelo-color-success-bg-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-success-900),
    white 1%
  );
  --sigvelo-color-success-bg-muted-light: var(--sigvelo-color-success-200);
  --sigvelo-color-success-bg-muted-dark: var(--sigvelo-color-success-800);
  --sigvelo-color-success-bg-light: color-mix(
    in oklab,
    var(--sigvelo-color-success-600),
    black 12%
  );
  --sigvelo-color-success-bg-dark: color-mix(in oklab, var(--sigvelo-color-success-600), black 16%);
  --sigvelo-color-success-bg-strong-light: var(--sigvelo-color-success-800);
  --sigvelo-color-success-bg-strong-dark: var(--sigvelo-color-success-200);
  --sigvelo-color-success-bg-stronger-light: var(--sigvelo-color-success-900);
  --sigvelo-color-success-bg-stronger-dark: var(--sigvelo-color-success-100);
  --sigvelo-color-success-text-on-subtle-light: var(--sigvelo-color-success-900);
  --sigvelo-color-success-text-on-subtle-dark: var(--sigvelo-color-success-100);
  --sigvelo-color-success-text-on-bg-light: white;
  --sigvelo-color-success-text-on-bg-dark: white;
  --sigvelo-color-success-text-on-strong-light: white;
  --sigvelo-color-success-text-on-strong-dark: black;
  --sigvelo-color-success-text-light: color-mix(
    in oklab,
    var(--sigvelo-color-success-600),
    black 12.5%
  );
  --sigvelo-color-success-text-dark: var(--sigvelo-color-success-500);
  --sigvelo-color-success-border-subtle-light: color-mix(
    in oklab,
    var(--sigvelo-color-success-100),
    black 3%
  );
  --sigvelo-color-success-border-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-success-900),
    white 7.5%
  );
  --sigvelo-color-success-border-muted-light: var(--sigvelo-color-success-300);
  --sigvelo-color-success-border-muted-dark: var(--sigvelo-color-success-800);
  --sigvelo-color-success-border-light: var(--sigvelo-color-success-500);
  --sigvelo-color-success-border-dark: var(--sigvelo-color-success-600);
  --sigvelo-color-warning-bg-subtle-light: var(--sigvelo-color-warning-100);
  --sigvelo-color-warning-bg-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-warning-900),
    white 1%
  );
  --sigvelo-color-warning-bg-muted-light: var(--sigvelo-color-warning-200);
  --sigvelo-color-warning-bg-muted-dark: var(--sigvelo-color-warning-800);
  --sigvelo-color-warning-bg-light: color-mix(
    in oklab,
    var(--sigvelo-color-warning-600),
    black 15%
  );
  --sigvelo-color-warning-bg-dark: color-mix(in oklab, var(--sigvelo-color-warning-600), black 18%);
  --sigvelo-color-warning-bg-strong-light: var(--sigvelo-color-warning-800);
  --sigvelo-color-warning-bg-strong-dark: var(--sigvelo-color-warning-200);
  --sigvelo-color-warning-bg-stronger-light: var(--sigvelo-color-warning-900);
  --sigvelo-color-warning-bg-stronger-dark: var(--sigvelo-color-warning-100);
  --sigvelo-color-warning-text-on-subtle-light: var(--sigvelo-color-warning-950);
  --sigvelo-color-warning-text-on-subtle-dark: var(--sigvelo-color-warning-100);
  --sigvelo-color-warning-text-on-bg-light: white;
  --sigvelo-color-warning-text-on-bg-dark: white;
  --sigvelo-color-warning-text-on-strong-light: white;
  --sigvelo-color-warning-text-on-strong-dark: black;
  --sigvelo-color-warning-text-light: color-mix(
    in oklab,
    var(--sigvelo-color-warning-600),
    black 22%
  );
  --sigvelo-color-warning-text-dark: var(--sigvelo-color-warning-500);
  --sigvelo-color-warning-border-subtle-light: color-mix(
    in oklab,
    var(--sigvelo-color-warning-100),
    black 3%
  );
  --sigvelo-color-warning-border-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-warning-900),
    white 7.5%
  );
  --sigvelo-color-warning-border-muted-light: var(--sigvelo-color-warning-300);
  --sigvelo-color-warning-border-muted-dark: var(--sigvelo-color-warning-800);
  --sigvelo-color-warning-border-light: var(--sigvelo-color-warning-500);
  --sigvelo-color-warning-border-dark: var(--sigvelo-color-warning-600);
  --sigvelo-color-danger-bg-subtle-light: var(--sigvelo-color-danger-100);
  --sigvelo-color-danger-bg-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-danger-900),
    white 1%
  );
  --sigvelo-color-danger-bg-muted-light: var(--sigvelo-color-danger-200);
  --sigvelo-color-danger-bg-muted-dark: var(--sigvelo-color-danger-800);
  --sigvelo-color-danger-bg-light: color-mix(in oklab, var(--sigvelo-color-danger-600), black 3.5%);
  --sigvelo-color-danger-bg-dark: color-mix(in oklab, var(--sigvelo-color-danger-600), black 7.5%);
  --sigvelo-color-danger-bg-strong-light: var(--sigvelo-color-danger-800);
  --sigvelo-color-danger-bg-strong-dark: var(--sigvelo-color-danger-200);
  --sigvelo-color-danger-bg-stronger-light: var(--sigvelo-color-danger-900);
  --sigvelo-color-danger-bg-stronger-dark: var(--sigvelo-color-danger-100);
  --sigvelo-color-danger-text-on-subtle-light: var(--sigvelo-color-danger-900);
  --sigvelo-color-danger-text-on-subtle-dark: var(--sigvelo-color-danger-100);
  --sigvelo-color-danger-text-on-bg-light: white;
  --sigvelo-color-danger-text-on-bg-dark: white;
  --sigvelo-color-danger-text-on-strong-light: white;
  --sigvelo-color-danger-text-on-strong-dark: black;
  --sigvelo-color-danger-text-light: color-mix(
    in oklab,
    var(--sigvelo-color-danger-600),
    black 12.5%
  );
  --sigvelo-color-danger-text-dark: var(--sigvelo-color-danger-400);
  --sigvelo-color-danger-border-subtle-light: color-mix(
    in oklab,
    var(--sigvelo-color-danger-100),
    black 3%
  );
  --sigvelo-color-danger-border-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-danger-900),
    white 7.5%
  );
  --sigvelo-color-danger-border-muted-light: var(--sigvelo-color-danger-300);
  --sigvelo-color-danger-border-muted-dark: var(--sigvelo-color-danger-800);
  --sigvelo-color-danger-border-light: var(--sigvelo-color-danger-500);
  --sigvelo-color-danger-border-dark: var(--sigvelo-color-danger-600);
}

/*
 * Interaction fills. Derived from the activated aliases so they follow system
 * preference, data-theme, and data-preset without another light/dark map.
 * Mix toward the on-fill text: that lightens a dark control and darkens a
 * light one, instead of always mixing toward black.
 */
:root {
  --sigvelo-color-primary-bg-hover: color-mix(
    in oklab,
    var(--sigvelo-color-primary-bg),
    var(--sigvelo-color-primary-text-on-bg) 6%
  );
  --sigvelo-color-primary-bg-press: color-mix(
    in oklab,
    var(--sigvelo-color-primary-bg),
    var(--sigvelo-color-primary-text-on-bg) 9%
  );
  --sigvelo-color-neutral-bg-hover: color-mix(
    in oklab,
    var(--sigvelo-color-neutral-bg-subtle),
    var(--sigvelo-color-neutral-text-on-subtle) 10%
  );
  --sigvelo-color-neutral-bg-press: color-mix(
    in oklab,
    var(--sigvelo-color-neutral-bg-subtle),
    var(--sigvelo-color-neutral-text-on-subtle) 16%
  );
  --sigvelo-color-danger-bg-hover: color-mix(
    in oklab,
    var(--sigvelo-color-danger-bg),
    var(--sigvelo-color-danger-text-on-bg) 10%
  );
  --sigvelo-color-danger-bg-press: color-mix(
    in oklab,
    var(--sigvelo-color-danger-bg),
    var(--sigvelo-color-danger-text-on-bg) 16%
  );
  --sigvelo-color-neutral-bg-selected: color-mix(
    in oklab,
    var(--sigvelo-color-neutral-bg-subtle),
    var(--sigvelo-color-neutral-text-on-subtle) 14%
  );
}