/* 3LA Signal Desk — code design-system foundations */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-SemiBold.woff') format('woff');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-Bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Reference colour palette */
  --ref-color-ink-950: #0e0d0c;
  --ref-color-ink-900: #14150e;
  --ref-color-ink-850: #1a1712;
  --ref-color-white: #ffffff;
  --ref-color-warm-50: #f6f6f2;
  --ref-color-warm-100: #eeeeec;
  --ref-color-brand-300: #dc7f9b;
  --ref-color-brand-400: #d0577a;
  --ref-color-brand-500: #bb2649;
  --ref-color-brand-600: #9e1e3d;
  --ref-color-brand-alpha-18: rgb(191 34 73 / .18);
  --ref-color-signal-500: #bf2249;
  --ref-color-signal-700: #8c1636;
  --ref-color-silver-500: #a9aeb6;
  --ref-color-brand-text-muted: #f8e5ea;
  --ref-color-ink-alpha-16: rgb(20 21 14 / .16);
  --ref-color-ink-alpha-32: rgb(20 21 14 / .32);
  --ref-color-ink-alpha-70: rgb(20 21 14 / .7);
  --ref-color-white-alpha-08: rgb(255 255 255 / .08);
  --ref-color-white-alpha-14: rgb(255 255 255 / .14);
  --ref-color-white-alpha-32: rgb(255 255 255 / .32);
  --ref-color-white-alpha-45: rgb(255 255 255 / .45);
  --ref-color-white-alpha-55: rgb(255 255 255 / .55);
  --ref-color-white-alpha-66: rgb(255 255 255 / .66);

  /* Reference spacing scale: deliberate 4/8 rhythm with larger layout stops. */
  --ref-space-0: 0;
  --ref-space-4: 4px;
  --ref-space-8: 8px;
  --ref-space-12: 12px;
  --ref-space-16: 16px;
  --ref-space-20: 20px;
  --ref-space-24: 24px;
  --ref-space-32: 32px;
  --ref-space-40: 40px;
  --ref-space-48: 48px;
  --ref-space-56: 56px;
  --ref-space-64: 64px;
  --ref-space-72: 72px;
  --ref-space-80: 80px;
  --ref-space-88: 88px;
  --ref-space-96: 96px;
  --ref-space-112: 112px;
  --ref-space-128: 128px;

  /* Reference shape, elevation and motion scales */
  --ref-radius-0: 0;
  --ref-radius-1: 8px;
  --ref-radius-2: 16px;
  --ref-radius-3: 24px;
  --ref-radius-4: 32px;
  --ref-radius-pill: 999px;
  --ref-radius-circle: 50%;
  --ref-shadow-0: none;
  --ref-shadow-1: 0 18px 40px -32px rgb(14 13 12 / .28);
  --ref-shadow-2: 0 24px 48px -36px rgb(14 13 12 / .35);
  --ref-shadow-3: 0 32px 72px -44px rgb(0 0 0 / .8);
  --ref-duration-0: 0ms;
  --ref-duration-1: 140ms;
  --ref-duration-2: 180ms;
  --ref-duration-3: 220ms;
  --ref-duration-4: 320ms;
  --ref-duration-5: 680ms;
  --ref-ease-linear: linear;
  --ref-ease-standard: ease;
  --ref-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ref-ease-spring: cubic-bezier(.34, 1.3, .64, 1);

  /* Semantic typography families and role bundles */
  --sys-type-heading-family: 'Inter Display', Arial, sans-serif;
  --sys-type-body-family: 'Inter Display', Arial, sans-serif;
  --sys-type-mono-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sys-type-display-size: clamp(3.2rem, 5.2vw, 5.8rem);
  --sys-type-display-weight: 400;
  --sys-type-display-leading: .93;
  --sys-type-display-tracking: -.04em;
  --sys-type-page-title-size: clamp(3rem, 5vw, 5.5rem);
  --sys-type-page-title-weight: 400;
  --sys-type-page-title-leading: .94;
  --sys-type-page-title-tracking: -.04em;
  --sys-type-section-title-size: clamp(2.5rem, 4vw, 4rem);
  --sys-type-section-title-weight: 500;
  --sys-type-section-title-leading: 1.03125;
  --sys-type-section-title-tracking: -.03em;
  --sys-type-feature-title-size: clamp(2.4rem, 3.6vw, 3.6rem);
  --sys-type-feature-title-weight: 500;
  --sys-type-feature-title-leading: 1.02;
  --sys-type-feature-title-tracking: -.03em;
  --sys-type-subsection-title-size: clamp(1.65rem, 2.2vw, 2.45rem);
  --sys-type-subsection-title-weight: 500;
  --sys-type-subsection-title-leading: 1.05;
  --sys-type-subsection-title-tracking: -.025em;
  --sys-type-card-title-size: clamp(1.6rem, 2.4vw, 2.35rem);
  --sys-type-card-title-weight: 500;
  --sys-type-card-title-leading: 1.06;
  --sys-type-card-title-tracking: -.025em;
  --sys-type-compact-title-size: clamp(1.45rem, 2vw, 1.85rem);
  --sys-type-compact-title-weight: 500;
  --sys-type-compact-title-leading: 1.15;
  --sys-type-compact-title-tracking: -.02em;
  --sys-type-lead-size: clamp(1.05rem, calc(1rem + .25vw), 1.22rem);
  --sys-type-lead-weight: 400;
  --sys-type-lead-leading: 1.6;
  --sys-type-lead-tracking: -.01em;
  --sys-type-body-size: 1rem;
  --sys-type-body-weight: 400;
  --sys-type-body-leading: 1.5;
  --sys-type-reading-size: 1.0625rem;
  --sys-type-reading-leading: 1.72;
  --sys-type-small-size: .875rem;
  --sys-type-small-leading: 1.55;
  --sys-type-caption-size: .8125rem;
  --sys-type-caption-leading: 1.5;
  --sys-type-control-size: .9375rem;
  --sys-type-control-weight: 500;
  --sys-type-control-leading: 1.25;
  --sys-type-navigation-size: .875rem;
  --sys-type-navigation-weight: 500;
  --sys-type-navigation-leading: 1.2;
  --sys-type-label-size: .75rem;
  --sys-type-label-weight: 500;
  --sys-type-label-leading: 1.45;
  --sys-type-label-tracking: .075em;
  --sys-type-metadata-size: .75rem;
  --sys-type-metadata-weight: 400;
  --sys-type-metadata-leading: 1.65;
  --sys-type-metadata-tracking: .075em;

  /* Semantic layout, shape, elevation and motion */
  --sys-space-page-gutter: clamp(var(--ref-space-20), 4vw, var(--ref-space-64));
  --sys-space-section-block: clamp(var(--ref-space-72), 7vw, var(--ref-space-112));
  --sys-space-band-block: clamp(var(--ref-space-80), 9vw, var(--ref-space-128));
  --sys-layout-page-max: 1440px;
  --sys-layout-content-max: calc(var(--sys-layout-page-max) - 2 * var(--sys-space-page-gutter));
  --sys-layout-reading-measure: 70ch;
  --sys-layout-header-height: var(--ref-space-80);
  --sys-layout-header-height-no-js-mobile: 146px;
  --sys-layout-continuation-lip: clamp(var(--ref-space-40), 6svh, var(--ref-space-56));
  --sys-control-target-min: 44px;
  --sys-radius-control: var(--ref-radius-pill);
  --sys-radius-card: var(--ref-radius-3);
  --sys-radius-panel: var(--ref-radius-4);
  --sys-border-hairline: 1px solid var(--sys-color-border-subtle);
  --sys-elevation-card: var(--ref-shadow-1);
  --sys-elevation-raised: var(--ref-shadow-2);
  --sys-elevation-overlay: var(--ref-shadow-3);
  --sys-motion-duration-hover: var(--ref-duration-1);
  --sys-motion-duration-none: var(--ref-duration-0);
  --sys-motion-duration-state: var(--ref-duration-2);
  --sys-motion-duration-expand: var(--ref-duration-3);
  --sys-motion-duration-emphasis: var(--ref-duration-4);
  --sys-motion-duration-reveal: var(--ref-duration-5);
  --sys-motion-ease-linear: var(--ref-ease-linear);
  --sys-motion-ease-standard: var(--ref-ease-standard);
  --sys-motion-ease-out: var(--ref-ease-out);
  --sys-motion-ease-spring: var(--ref-ease-spring);

  /* Light is the default surface contract. */
  --sys-color-canvas: var(--ref-color-white);
  --sys-color-surface: var(--ref-color-white);
  --sys-color-surface-raised: var(--ref-color-warm-50);
  --sys-color-text-primary: var(--ref-color-ink-900);
  --sys-color-text-secondary: var(--ref-color-ink-alpha-70);
  --sys-color-accent: var(--ref-color-brand-500);
  --sys-color-signal: var(--ref-color-signal-500);
  --sys-color-border-subtle: var(--ref-color-ink-alpha-16);
  --sys-color-border-strong: var(--ref-color-ink-900);
  --sys-color-focus-ring: var(--ref-color-signal-500);
  --sys-color-selection-bg: var(--ref-color-brand-500);
  --sys-color-selection-text: var(--ref-color-white);
  --sys-color-action-bg: var(--ref-color-ink-900);
  --sys-color-action-text: var(--ref-color-white);
  --sys-color-action-hover-bg: var(--ref-color-ink-950);
  --sys-color-action-hover-text: var(--ref-color-white);
  --sys-color-link: var(--ref-color-signal-700);
  --sys-color-link-hover: var(--ref-color-ink-900);
  --sys-color-hover-bg: var(--ref-color-warm-50);
  --sys-color-hover-text: var(--ref-color-ink-900);
  --sys-color-active-bg: var(--ref-color-warm-100);
  --sys-color-active-text: var(--ref-color-ink-900);
  --sys-color-disabled-bg: var(--ref-color-warm-100);
  --sys-color-disabled-text: var(--ref-color-ink-alpha-70);
  --sys-opacity-disabled: .45;
}

[data-surface="light"] {
  --sys-color-canvas: var(--ref-color-white);
  --sys-color-surface: var(--ref-color-white);
  --sys-color-surface-raised: var(--ref-color-warm-50);
  --sys-color-text-primary: var(--ref-color-ink-900);
  --sys-color-text-secondary: var(--ref-color-ink-alpha-70);
  --sys-color-accent: var(--ref-color-brand-500);
  --sys-color-signal: var(--ref-color-signal-500);
  --sys-color-border-subtle: var(--ref-color-ink-alpha-16);
  --sys-color-border-strong: var(--ref-color-ink-900);
  --sys-color-focus-ring: var(--ref-color-signal-500);
  --sys-color-selection-bg: var(--ref-color-brand-500);
  --sys-color-selection-text: var(--ref-color-white);
  --sys-color-action-bg: var(--ref-color-ink-900);
  --sys-color-action-text: var(--ref-color-white);
  --sys-color-action-hover-bg: var(--ref-color-ink-950);
  --sys-color-action-hover-text: var(--ref-color-white);
  --sys-color-link: var(--ref-color-signal-700);
  --sys-color-link-hover: var(--ref-color-ink-900);
  --sys-color-hover-bg: var(--ref-color-warm-50);
  --sys-color-hover-text: var(--ref-color-ink-900);
  --sys-color-active-bg: var(--ref-color-warm-100);
  --sys-color-active-text: var(--ref-color-ink-900);
  --sys-color-disabled-bg: var(--ref-color-warm-100);
  --sys-color-disabled-text: var(--ref-color-ink-alpha-70);
  --sys-opacity-disabled: .45;
  --sys-border-hairline: 1px solid var(--sys-color-border-subtle);
  --sys-elevation-card: var(--ref-shadow-1);
  --sys-elevation-raised: var(--ref-shadow-2);
  --sys-elevation-overlay: var(--ref-shadow-3);
}

[data-surface="ink"] {
  --sys-color-canvas: var(--ref-color-ink-950);
  --sys-color-surface: var(--ref-color-ink-900);
  --sys-color-surface-raised: var(--ref-color-ink-850);
  --sys-color-text-primary: var(--ref-color-white);
  --sys-color-text-secondary: var(--ref-color-white-alpha-66);
  --sys-color-accent: var(--ref-color-brand-300);
  --sys-color-signal: var(--ref-color-brand-300);
  --sys-color-border-subtle: var(--ref-color-white-alpha-14);
  --sys-color-border-strong: var(--ref-color-white-alpha-32);
  --sys-color-focus-ring: var(--ref-color-white);
  --sys-color-selection-bg: var(--ref-color-brand-500);
  --sys-color-selection-text: var(--ref-color-white);
  --sys-color-action-bg: var(--ref-color-white);
  --sys-color-action-text: var(--ref-color-ink-900);
  --sys-color-action-hover-bg: var(--ref-color-warm-50);
  --sys-color-action-hover-text: var(--ref-color-ink-900);
  --sys-color-link: var(--ref-color-brand-300);
  --sys-color-link-hover: var(--ref-color-white);
  --sys-color-hover-bg: var(--ref-color-white-alpha-08);
  --sys-color-hover-text: var(--ref-color-white);
  --sys-color-active-bg: var(--ref-color-brand-alpha-18);
  --sys-color-active-text: var(--ref-color-white);
  --sys-color-disabled-bg: var(--ref-color-ink-850);
  --sys-color-disabled-text: var(--ref-color-white-alpha-45);
  --sys-opacity-disabled: .45;
  --sys-border-hairline: 1px solid var(--sys-color-border-subtle);
  --sys-elevation-card: var(--ref-shadow-0);
  --sys-elevation-raised: var(--ref-shadow-0);
  --sys-elevation-overlay: var(--ref-shadow-3);
}

[data-surface="brand"] {
  --sys-color-canvas: var(--ref-color-brand-500);
  --sys-color-surface: var(--ref-color-brand-500);
  --sys-color-surface-raised: var(--ref-color-brand-600);
  --sys-color-text-primary: var(--ref-color-white);
  --sys-color-text-secondary: var(--ref-color-brand-text-muted);
  --sys-color-accent: var(--ref-color-white);
  --sys-color-signal: var(--ref-color-white);
  --sys-color-border-subtle: var(--ref-color-white-alpha-32);
  --sys-color-border-strong: var(--ref-color-white-alpha-55);
  --sys-color-focus-ring: var(--ref-color-ink-900);
  --sys-color-selection-bg: var(--ref-color-ink-900);
  --sys-color-selection-text: var(--ref-color-white);
  --sys-color-action-bg: var(--ref-color-white);
  --sys-color-action-text: var(--ref-color-ink-900);
  --sys-color-action-hover-bg: var(--ref-color-warm-50);
  --sys-color-action-hover-text: var(--ref-color-ink-900);
  --sys-color-link: var(--ref-color-white);
  --sys-color-link-hover: var(--ref-color-warm-50);
  --sys-color-hover-bg: var(--ref-color-warm-50);
  --sys-color-hover-text: var(--ref-color-ink-900);
  --sys-color-active-bg: var(--ref-color-ink-900);
  --sys-color-active-text: var(--ref-color-white);
  --sys-color-disabled-bg: var(--ref-color-brand-600);
  --sys-color-disabled-text: var(--ref-color-brand-text-muted);
  --sys-opacity-disabled: .45;
  --sys-border-hairline: 1px solid var(--sys-color-border-subtle);
  --sys-elevation-card: var(--ref-shadow-1);
  --sys-elevation-raised: var(--ref-shadow-2);
  --sys-elevation-overlay: var(--ref-shadow-3);
}

@media (max-width: 960px) {
  :root {
    --sys-layout-header-height: calc(var(--ref-space-64) + var(--ref-space-4));
    --sys-type-display-size: clamp(3.2rem, 7vw, 5.1rem);
    --sys-type-page-title-size: clamp(3.2rem, 7vw, 5.1rem);
    --sys-type-card-title-size: 1.45rem;
  }
}

@media (max-width: 680px) {
  :root {
    --sys-type-display-size: clamp(2.25rem, 10.8vw, 3.6rem);
    --sys-type-display-leading: 1.05;
    --sys-type-page-title-size: clamp(2.4rem, 11vw, 3.6rem);
    --sys-type-page-title-leading: 1.05;
    --sys-type-section-title-size: clamp(2rem, 10vw, 3.5rem);
    --sys-type-feature-title-size: 1.5rem;
    --sys-type-feature-title-leading: 1.08;
    --sys-type-subsection-title-size: 1.55rem;
    --sys-type-card-title-size: clamp(1.25rem, 5.5vw, 1.5rem);
    --sys-type-compact-title-size: clamp(1.25rem, 5.5vw, 1.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sys-motion-duration-hover: var(--ref-duration-0);
    --sys-motion-duration-state: var(--ref-duration-0);
    --sys-motion-duration-expand: var(--ref-duration-0);
    --sys-motion-duration-emphasis: var(--ref-duration-0);
    --sys-motion-duration-reveal: var(--ref-duration-0);
    --sys-motion-ease-standard: var(--ref-ease-linear);
    --sys-motion-ease-out: var(--ref-ease-linear);
    --sys-motion-ease-spring: var(--ref-ease-linear);
  }
  html { scroll-behavior: auto; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sys-layout-header-height) + 24px); }
body {
  margin: 0;
  background: var(--sys-color-surface);
  color: var(--sys-color-text-primary);
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-body-size);
  line-height: var(--sys-type-body-leading);
  font-weight: var(--sys-type-body-weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
:where(button, input, select, textarea, [role="button"]) {
  min-height: var(--sys-control-target-min);
}
a { color: inherit; }
p, h1, h2, h3, h4, h5, h6, dl, dd { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
  font-family: var(--sys-type-heading-family) !important;
  text-wrap: balance;
}
p, li, dd, blockquote { text-wrap: pretty; }

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  background: var(--sys-color-disabled-bg);
  color: var(--sys-color-disabled-text);
  cursor: not-allowed;
  opacity: var(--sys-opacity-disabled);
}

/* Public type roles: HTML level owns structure; these roles own presentation. */
.type-display {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-display-size);
  font-weight: var(--sys-type-display-weight);
  line-height: var(--sys-type-display-leading);
  letter-spacing: var(--sys-type-display-tracking);
  text-wrap: balance;
}

:where(h1),
.type-page-title {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-page-title-size);
  font-weight: var(--sys-type-page-title-weight);
  line-height: var(--sys-type-page-title-leading);
  letter-spacing: var(--sys-type-page-title-tracking);
  text-wrap: balance;
}

:where(h2),
.type-section-title {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-section-title-size);
  font-weight: var(--sys-type-section-title-weight);
  line-height: var(--sys-type-section-title-leading);
  letter-spacing: var(--sys-type-section-title-tracking);
  text-wrap: balance;
}

.type-feature-title {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-feature-title-size);
  font-weight: var(--sys-type-feature-title-weight);
  line-height: var(--sys-type-feature-title-leading);
  letter-spacing: var(--sys-type-feature-title-tracking);
  text-wrap: balance;
}

:where(h3),
.type-subsection-title {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-subsection-title-size);
  font-weight: var(--sys-type-subsection-title-weight);
  line-height: var(--sys-type-subsection-title-leading);
  letter-spacing: var(--sys-type-subsection-title-tracking);
  text-wrap: balance;
}

.type-card-title {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-card-title-size);
  font-weight: var(--sys-type-card-title-weight);
  line-height: var(--sys-type-card-title-leading);
  letter-spacing: var(--sys-type-card-title-tracking);
  text-wrap: balance;
}

:where(h4, h5, h6),
.type-compact-title {
  font-family: var(--sys-type-heading-family);
  font-size: var(--sys-type-compact-title-size);
  font-weight: var(--sys-type-compact-title-weight);
  line-height: var(--sys-type-compact-title-leading);
  letter-spacing: var(--sys-type-compact-title-tracking);
  text-wrap: balance;
}

.type-lead {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-lead-size);
  font-weight: var(--sys-type-lead-weight);
  line-height: var(--sys-type-lead-leading);
  letter-spacing: var(--sys-type-lead-tracking);
  text-wrap: pretty;
}

.type-body {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-body-size);
  font-weight: var(--sys-type-body-weight);
  line-height: var(--sys-type-body-leading);
  letter-spacing: 0;
  text-wrap: pretty;
}

.type-reading {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-reading-size);
  font-weight: var(--sys-type-body-weight);
  line-height: var(--sys-type-reading-leading);
  letter-spacing: 0;
  text-wrap: pretty;
}

.type-small {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-small-size);
  font-weight: var(--sys-type-body-weight);
  line-height: var(--sys-type-small-leading);
  letter-spacing: 0;
  text-wrap: pretty;
}

.type-caption {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-caption-size);
  font-weight: var(--sys-type-body-weight);
  line-height: var(--sys-type-caption-leading);
  letter-spacing: 0;
  text-wrap: pretty;
}

.type-control {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-control-size);
  font-weight: var(--sys-type-control-weight);
  line-height: var(--sys-type-control-leading);
  letter-spacing: 0;
}

.type-nav {
  font-family: var(--sys-type-body-family);
  font-size: var(--sys-type-navigation-size);
  font-weight: var(--sys-type-navigation-weight);
  line-height: var(--sys-type-navigation-leading);
  letter-spacing: 0;
  white-space: nowrap;
}

.type-label {
  font-family: var(--sys-type-mono-family);
  font-size: var(--sys-type-label-size);
  font-weight: var(--sys-type-label-weight);
  line-height: var(--sys-type-label-leading);
  letter-spacing: var(--sys-type-label-tracking);
  text-transform: uppercase;
  text-wrap: wrap;
}

.type-meta {
  font-family: var(--sys-type-mono-family);
  font-size: var(--sys-type-metadata-size);
  font-weight: var(--sys-type-metadata-weight);
  line-height: var(--sys-type-metadata-leading);
  letter-spacing: var(--sys-type-metadata-tracking);
  text-transform: uppercase;
  text-wrap: pretty;
}
::selection {
  background: var(--sys-color-selection-bg);
  color: var(--sys-color-selection-text);
}

:focus-visible {
  outline: 3px solid var(--sys-color-focus-ring);
  outline-offset: 4px;
}

@media print {
  :root,
  [data-surface] {
    --sys-color-canvas: var(--ref-color-white);
    --sys-color-surface: var(--ref-color-white);
    --sys-color-surface-raised: var(--ref-color-white);
    --sys-color-text-primary: var(--ref-color-ink-900);
    --sys-color-text-secondary: var(--ref-color-ink-alpha-70);
    --sys-color-border-subtle: var(--ref-color-ink-alpha-16);
    --sys-color-border-strong: var(--ref-color-ink-alpha-32);
    --sys-color-focus-ring: var(--ref-color-signal-500);
  }
}