/**
 * Canonical Helix aliases (2.76.5)
 *
 * Public primitives consume --hx-fg / --hx-surface / --hx-line / --hx-primary.
 * Studio prefixes only alias those names. Do not add a parallel --hx-color-* set.
 */
:root {
  --hx-fg: var(--color-text-primary));
  --hx-fg-muted: var(--color-text-muted);
  --hx-surface: var(--color-bg-elevated));
  --hx-surface-subtle: var(--color-bg-subtle);
  --hx-line: var(--color-border-subtle);
  --hx-focus: var(--color-charcoal);
  --hx-primary: var(--color-primary));
  --hx-on-primary: var(--color-on-primary);
  --hx-danger: var(--color-badge-error-fg));
  --hx-warning: var(--color-badge-warning-fg);
  --hx-success: var(--color-badge-success-fg));
  --hx-field-radius: var(--radius-md);
  --font-family-body: "Timeless Text", "Timeless Sans", system-ui, sans-serif;
  --font-family-heading: "Timeless Serif", "Timeless Text", Georgia, serif;
  --font-family-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-4xs: 0.375rem;
  --font-size-3xs: 0.4375rem;
  --font-size-2xs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.8125rem;
  --font-size-4xl: 2.1875rem;
  --font-size-5xl: 2.625rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --text-body-leading: 1.5;
  --text-heading-1-size: var(--font-size-4xl);
  --text-heading-2-size: var(--font-size-3xl);
  --text-heading-3-size: var(--font-size-2xl);
  --text-heading-4-size: var(--font-size-xl);
  --text-body-size: var(--font-size-base);
  --text-label-size: var(--font-size-sm);
  --hx-field-height-md: var(--space-10);
  --hx-elev: var(--shadow-lg);
  --hx-pill: var(--radius-full);

  /* Back-compat for 2.76.1 sheet — same values, do not use in new CSS. */
  --hx-color-fg: var(--hx-fg);
  --hx-color-bg: var(--hx-surface);
  --hx-color-line: var(--hx-line);
  --hx-color-focus: var(--hx-focus);
  --hx-color-primary: var(--hx-primary);
  --hx-color-on-fg: var(--hx-on-primary);

  --ws-fg: var(--hx-fg);
  --ws-bg: var(--hx-surface);
  --ws-line: var(--hx-line);

  --color-badge-info: var(--color-badge-info-bg);
  --color-badge-success: var(--color-badge-success-bg);
  --color-badge-warning: var(--color-badge-warning-bg);
  --color-badge-error: var(--color-badge-error-bg);
  --color-badge-neutral: var(--color-badge-neutral-bg);
  --color-badge-recommendation: var(--color-badge-recommendation-bg);
  --color-badge-lightWash: var(--color-badge-lightWash-bg);
  --color-badge-darkWash: var(--color-badge-darkWash-bg);
  --color-badge-info-pair: var(--color-badge-info-fg);
  --color-badge-success-pair: var(--color-badge-success-fg);
  --color-badge-warning-pair: var(--color-badge-warning-fg);
  --color-badge-error-pair: var(--color-badge-error-fg);
  --color-badge-neutral-pair: var(--color-badge-neutral-fg);
  --color-badge-recommendation-pair: var(--color-badge-recommendation-fg);
  --color-badge-lightWash-pair: var(--color-badge-lightWash-fg);
  --color-badge-darkWash-pair: var(--color-badge-darkWash-fg);
  --color-label-lime-pair: var(--color-label-lime-dark);
  --color-label-sky-pair: var(--color-label-sky-dark);
  --color-label-amber-pair: var(--color-label-amber-dark);
  --color-label-pink-pair: var(--color-label-pink-dark);
  --color-label-purple-pair: var(--color-label-purple-dark);

  --color-badge-info-text: var(--color-badge-info-pair);
  --color-badge-success-text: var(--color-badge-success-pair);
  --color-badge-warning-text: var(--color-badge-warning-pair);
  --color-badge-error-text: var(--color-badge-error-pair);
  --color-badge-neutral-text: var(--color-badge-neutral-pair);
  --color-badge-recommendation-text: var(--color-badge-recommendation-pair);
  --color-badge-lightWash-text: var(--color-badge-lightWash-pair);
  --color-badge-darkWash-text: var(--color-badge-darkWash-pair);
  --color-label-lime-text: var(--color-label-lime-pair);
  --color-label-sky-text: var(--color-label-sky-pair);
  --color-label-amber-text: var(--color-label-amber-pair);
  --color-label-pink-text: var(--color-label-pink-pair);
  --color-label-purple-text: var(--color-label-purple-pair);

  --color-badge-info-ink: var(--color-badge-info-text);
  --color-badge-success-ink: var(--color-badge-success-text);
  --color-badge-warning-ink: var(--color-badge-warning-text);
  --color-badge-error-ink: var(--color-badge-error-text);
  --color-badge-neutral-ink: var(--color-badge-neutral-text);
  --color-badge-recommendation-ink: var(--color-badge-recommendation-text);
  --color-badge-lightWash-ink: var(--color-badge-lightWash-text);
  --color-badge-darkWash-ink: var(--color-badge-darkWash-text);
  --color-label-lime-ink: var(--color-label-lime-text);
  --color-label-sky-ink: var(--color-label-sky-text);
  --color-label-amber-ink: var(--color-label-amber-text);
  --color-label-pink-ink: var(--color-label-pink-text);
  --color-label-purple-ink: var(--color-label-purple-text);

  --color-on-badge-info: var(--color-badge-info-ink);
  --color-on-badge-success: var(--color-badge-success-ink);
  --color-on-badge-warning: var(--color-badge-warning-ink);
  --color-on-badge-error: var(--color-badge-error-ink);
  --color-on-badge-neutral: var(--color-badge-neutral-ink);
  --color-on-badge-recommendation: var(--color-badge-recommendation-ink);
  --color-on-label-lime: var(--color-label-lime-ink);
  --color-on-label-sky: var(--color-label-sky-ink);
  --color-on-label-amber: var(--color-label-amber-ink);
  --color-on-label-pink: var(--color-label-pink-ink);
  --color-on-label-purple: var(--color-label-purple-ink);

  --shadow-low: 0 1px 1px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.1);
  --shadow-med: 0 1px 2px rgba(0,0,0,.1), 0 2px 12px rgba(0,0,0,.1);
  --shadow-high: 0 2px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.1);
  --shadow-inset-hover: inset 0 0 0 2px rgba(5,54,89,.15);
  --shadow-inset-selected: inset 0 0 0 2px rgba(1,113,227,.5);
  --shadow-inset-success: inset 0 0 0 2px rgba(38,167,86,.3);
  --shadow-inset-warning: inset 0 0 0 2px rgba(226,164,0,.3);
  --shadow-inset-error: inset 0 0 0 2px rgba(227,25,59,.3);
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: 20px;
  --spacing-6: var(--space-6);
  --spacing-7: 28px;
  --spacing-8: var(--space-8);
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --radius-none: 0px;
  --radius-inner: 8px;
  --radius-element: 12px;
  --radius-container: 16px;
  --radius-page: 32px;
  --radius-chat: 28px;
  --radius-full: 9999px;
  --duration-fast-min: 130ms;
  --duration-fast: 175ms;
  --duration-fast-max: 230ms;
  --duration-medium-min: 310ms;
  --duration-medium: 410ms;
  --duration-medium-max: 550ms;
  --duration-slow-min: 730ms;
  --duration-slow: 975ms;
  --duration-slow-max: 1300ms;
  --motion-duration-fast: var(--duration-fast);
  --motion-duration-base: var(--duration-medium);
  --motion-duration-slow: var(--duration-slow);
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
}
html[data-theme="dark"],
html[data-ds-theme="dark"] {
  --hx-fg: #f3f3f3;
  --hx-fg-muted: #b3b3b3;
  --hx-surface: #161616;
  --hx-surface-subtle: #222;
  --hx-line: #333;
  --hx-focus: #fff;
  --hx-on-primary: #fff;
  --hx-elev: 0 12px 32px rgba(0,0,0,.45);
  --hx-color-fg: var(--hx-fg);
  --hx-color-bg: var(--hx-surface);
  --hx-color-line: var(--hx-line);
  --ws-fg: var(--hx-fg);
  --ws-bg: var(--hx-surface);
  --ws-line: var(--hx-line);
  --color-text-primary: var(--hx-fg);
  --color-bg-base: var(--hx-surface);
  --color-bg-elevated: #1c1c1c;
  --color-bg-subtle: var(--hx-surface-subtle);
  --color-border-subtle: var(--hx-line);
  /* brand charcoal stays fixed; text uses --hx-fg */
  --ws-button-secondary-bg: var(--hx-surface-subtle);
  --ws-button-secondary-color: #121212;
  --ws-button-secondary-border: var(--hx-line);
  --ws-button-tertiary-bg: transparent;
  --ws-button-tertiary-color: var(--hx-fg);
  --ws-button-ghost-bg: transparent;
  --ws-button-ghost-color: var(--hx-fg);
  --hx-btn-secondary-fg: #121212;
  --hx-btn-secondary-hover-bg: color-mix(in srgb, var(--color-secondary) 30%, #fff);
  --color-secondary: #1C2A5C;
  --color-secondary-hover: #24356E;
  --color-secondary-pressed: #2C4180;
  --color-on-secondary: #E8EDFF;
  --shadow-low: 0 1px 1px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.2);
  --shadow-med: 0 1px 2px rgba(0,0,0,.2), 0 2px 12px rgba(0,0,0,.2);
  --shadow-high: 0 2px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.3);
  --shadow-inset-hover: inset 0 0 0 2px rgba(223,226,229,.2);
}