/*
 * The legacy compatibility layer - TEMPORARY (phase 7 deletes it).
 * ----------------------------------------------------------------------------
 * The --bd-* tokens unmigrated pages read. Surface, backdrop, text, border,
 * primary, focus, danger and accent tokens alias Styles/aiero/global/_tokens.scss,
 * so those pages render in the template palette and theme. The backdrop mesh is
 * flat (AIERO has none); a section is the page ground inside a raised card. Light
 * keeps two literals, primary-mid/-dark: darker than primary text, so white reads
 * on them and hover shows. Dark solves the ladder as a set: resting = brand azure
 * (ink label), hover/pressed = primary text, primary-light = white (a disc behind
 * a primary glyph at 3:1, and link text at 4.5:1). Other literals have no template
 * counterpart yet. Blocks as in _tokens.scss; an alias is repeated in every block
 * that declares the token. Guards: LegacyStylesheetsAreOnTheirWayOutTests and
 * LegacyTokenContrastTests. No var() carries a fallback.
 * ----------------------------------------------------------------------------
 */

:root {
  --bd-color-surface: var(--color-surface-page);
  --bd-color-surface-raised: var(--color-surface-raised);
  --bd-color-surface-overlay: var(--color-surface-raised);
  --bd-color-surface-overlay-2: var(--color-surface-raised);
  --bd-color-apple-button: #000000;
  --bd-color-on-apple-button: #FFFFFF;
  --bd-color-on-surface: var(--color-heading);
  --bd-color-muted: var(--color-muted);
  --bd-color-border: var(--color-border);
  --bd-color-border-strong: var(--color-muted);
  --bd-color-primary: var(--color-primary-text);
  --bd-color-primary-dark: #004570;
  --bd-color-primary-mid: #005D8F;
  --bd-color-primary-light: #ABF2FF;
  --bd-color-primary-vivid: var(--color-primary);
  --bd-color-on-primary: var(--color-on-primary);
  --bd-color-backdrop-warm: var(--color-surface-page);
  --bd-color-backdrop-sun: var(--color-surface-page);
  --bd-color-backdrop-cool: var(--color-surface-page);
  --bd-color-backdrop: var(--bd-color-surface);
  --bd-color-glass-bg: rgba(255, 255, 255, 0.62);
  --bd-color-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --bd-color-glass-border: rgba(5, 19, 29, 0.08);
  --bd-color-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --bd-glass-blur: 16px;
  --bd-color-card-surface: var(--color-surface-raised);
  --bd-color-section-surface: var(--color-surface-page);
  --bd-scrim-photo-text: rgba(0, 0, 0, 0.85);
  --bd-scrim-photo-icon: rgba(0, 0, 0, 0.75);
  --bd-scrim-photo-fade: 96px;
  --bd-color-success: #456300;
  --bd-color-on-success: #FFFFFF;
  --bd-color-success-surface: #E4FF9C;
  --bd-color-warning: #7A4C00;
  --bd-color-on-warning: #FFFFFF;
  --bd-color-warning-surface: #FFF2C6;
  --bd-color-danger: var(--color-secondary-text);
  --bd-color-on-danger: #FFFFFF;
  --bd-color-danger-surface: #FFECF1;
  --bd-color-scrim: rgba(5, 19, 29, 0.48);
  --bd-color-focus-ring: var(--color-focus-ring);
  --bd-grade-1: #314A00;
  --bd-grade-2: #5B7E00;
  --bd-grade-3: #00646E;
  --bd-grade-4: #0077AF;
  --bd-grade-5: #885A95;
  --bd-grade-6: #7A4C00;
  --bd-grade-7: #976300;
  --bd-grade-8: #BB355D;
  --bd-grade-9: #780632;
  --bd-color-on-grade: #FFFFFF;
  --bd-accent-red: var(--color-accent-red);
  --bd-accent-red-ink: var(--color-accent-red-ink);
  --bd-accent-orange: var(--color-accent-orange);
  --bd-accent-orange-ink: var(--color-accent-orange-ink);
  --bd-accent-yellow: var(--color-accent-yellow);
  --bd-accent-yellow-ink: var(--color-accent-yellow-ink);
  --bd-accent-green: var(--color-accent-green);
  --bd-accent-green-ink: var(--color-accent-green-ink);
  --bd-accent-blue: var(--color-accent-blue);
  --bd-accent-blue-ink: var(--color-accent-blue-ink);
  --bd-accent-purple: var(--color-accent-purple);
  --bd-accent-purple-ink: var(--color-accent-purple-ink);
  --bd-space-0: 0;
  --bd-space-1: 4px;
  --bd-space-2: 8px;
  --bd-space-3: 12px;
  --bd-space-4: 16px;
  --bd-space-5: 20px;
  --bd-space-6: 24px;
  --bd-space-7: 32px;
  --bd-space-8: 40px;
  --bd-space-9: 48px;
  --bd-space-10: 64px;
  --bd-space-11: 80px;
  --bd-space-12: 96px;
  --bd-radius-sm: 8px;
  --bd-radius-md: 12px;
  --bd-radius-lg: 20px;
  --bd-radius-xl: 28px;
  --bd-radius-pill: 999px;
  --bd-shadow-0: none;
  --bd-shadow-1: 0 1px 2px rgba(5, 19, 29, 0.06), 0 1px 1px rgba(5, 19, 29, 0.04);
  --bd-shadow-2: 0 2px 8px rgba(5, 19, 29, 0.10), 0 1px 2px rgba(5, 19, 29, 0.06);
  --bd-shadow-3: 0 8px 24px rgba(5, 19, 29, 0.14), 0 2px 6px rgba(5, 19, 29, 0.08);
  --bd-shadow-4: 0 16px 48px rgba(5, 19, 29, 0.24);
  --bd-font-display: var(--font-primary);
  --bd-font-body: var(--font-secondary);
  --bd-type-display-lg-size: clamp(2.125rem, 1.869rem + 1.14vw, 2.75rem);
  --bd-type-display-lg-line: 1.176;
  --bd-type-display-size: clamp(1.75rem, 1.597rem + 0.68vw, 2.125rem);
  --bd-type-display-line: 1.214;
  --bd-type-headline-size: clamp(1.375rem, 1.273rem + 0.45vw, 1.625rem);
  --bd-type-headline-line: 1.273;
  --bd-type-title-size: clamp(1.125rem, 1.074rem + 0.23vw, 1.25rem);
  --bd-type-title-line: 1.333;
  --bd-type-body-lg-size: 1.0625rem;
  --bd-type-body-lg-line: 1.5rem;
  --bd-type-body-size: 1rem;
  --bd-type-body-line: 1.375rem;
  --bd-type-body-sm-size: 0.875rem;
  --bd-type-body-sm-line: 1.25rem;
  --bd-type-label-size: 0.75rem;
  --bd-type-label-line: 1rem;
  --bd-type-label-tracking: 0.02em;
  --bd-type-caption-size: 0.75rem;
  --bd-type-caption-line: 1rem;
  --bd-duration-instant: 100ms;
  --bd-duration-short: 150ms;
  --bd-duration-medium: 250ms;
  --bd-duration-long: 400ms;
  --bd-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bd-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --bd-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --bd-ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);
  --bd-z-base: 0;
  --bd-z-sticky-header: 10;
  --bd-z-bottom-bar: 15;
  --bd-z-sidebar: 20;
  --bd-z-dropdown: 30;
  --bd-z-scrim: 40;
  --bd-z-modal: 50;
  --bd-z-toast: 60;
  --bd-z-scanner-overlay: 70;
  --bd-safe-area-top: env(safe-area-inset-top, 0px);
  --bd-safe-area-right: env(safe-area-inset-right, 0px);
  --bd-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --bd-safe-area-left: env(safe-area-inset-left, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bd-color-surface: var(--color-surface-page);
    --bd-color-surface-raised: var(--color-surface-raised);
    --bd-color-surface-overlay: var(--color-surface-raised);
    --bd-color-surface-overlay-2: var(--color-surface-raised);
    --bd-color-apple-button: #FFFFFF;
    --bd-color-on-apple-button: #000000;
    --bd-color-on-surface: var(--color-heading);
    --bd-color-muted: var(--color-muted);
    --bd-color-border: var(--color-border);
    --bd-color-border-strong: var(--color-muted);
    --bd-color-primary: var(--color-primary);
    --bd-color-primary-light: var(--color-content-white);
    --bd-color-primary-mid: var(--color-primary-text);
    --bd-color-primary-dark: var(--color-primary-text);
    --bd-color-backdrop-warm: var(--color-surface-page);
    --bd-color-backdrop-sun: var(--color-surface-page);
    --bd-color-backdrop-cool: var(--color-surface-page);
    --bd-color-glass-bg: rgba(17, 30, 39, 0.55);
    --bd-color-glass-bg-strong: rgba(17, 30, 39, 0.72);
    --bd-color-glass-border: rgba(111, 197, 252, 0.10);
    --bd-color-glass-highlight: inset 0 1px 0 rgba(111, 197, 252, 0.08);
    --bd-color-card-surface: var(--color-surface-raised);
    --bd-color-section-surface: var(--color-surface-page);
    --bd-color-success: #A5CC2C;
    --bd-color-on-success: #05131D;
    --bd-color-success-surface: #314A00;
    --bd-color-warning: #E4B14F;
    --bd-color-on-warning: #05131D;
    --bd-color-warning-surface: #5E3600;
    --bd-color-danger: var(--color-secondary-text);
    --bd-color-on-danger: #05131D;
    --bd-color-danger-surface: #780632;
    --bd-color-scrim: rgba(0, 0, 0, 0.6);
    --bd-color-focus-ring: var(--color-focus-ring);
    --bd-grade-1: #88B000;
    --bd-grade-2: #C0E561;
    --bd-grade-3: #4AAFBA;
    --bd-grade-4: #91DEFF;
    --bd-grade-5: #D5A7E2;
    --bd-grade-6: #E4B14F;
    --bd-grade-7: #CA9411;
    --bd-grade-8: #FF93AB;
    --bd-grade-9: #F4698B;
    --bd-color-on-grade: #05131D;
    --bd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bd-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --bd-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
    --bd-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bd-color-surface: var(--color-surface-page);
  --bd-color-surface-raised: var(--color-surface-raised);
  --bd-color-surface-overlay: var(--color-surface-raised);
  --bd-color-surface-overlay-2: var(--color-surface-raised);
  --bd-color-apple-button: #FFFFFF;
  --bd-color-on-apple-button: #000000;
  --bd-color-on-surface: var(--color-heading);
  --bd-color-muted: var(--color-muted);
  --bd-color-border: var(--color-border);
  --bd-color-border-strong: var(--color-muted);
  --bd-color-primary: var(--color-primary);
  --bd-color-primary-light: var(--color-content-white);
  --bd-color-primary-mid: var(--color-primary-text);
  --bd-color-primary-dark: var(--color-primary-text);
  --bd-color-backdrop-warm: var(--color-surface-page);
  --bd-color-backdrop-sun: var(--color-surface-page);
  --bd-color-backdrop-cool: var(--color-surface-page);
  --bd-color-glass-bg: rgba(17, 30, 39, 0.55);
  --bd-color-glass-bg-strong: rgba(17, 30, 39, 0.72);
  --bd-color-glass-border: rgba(111, 197, 252, 0.10);
  --bd-color-glass-highlight: inset 0 1px 0 rgba(111, 197, 252, 0.08);
  --bd-color-card-surface: var(--color-surface-raised);
  --bd-color-section-surface: var(--color-surface-page);
  --bd-color-success: #A5CC2C;
  --bd-color-on-success: #05131D;
  --bd-color-success-surface: #314A00;
  --bd-color-warning: #E4B14F;
  --bd-color-on-warning: #05131D;
  --bd-color-warning-surface: #5E3600;
  --bd-color-danger: var(--color-secondary-text);
  --bd-color-on-danger: #05131D;
  --bd-color-danger-surface: #780632;
  --bd-color-scrim: rgba(0, 0, 0, 0.6);
  --bd-color-focus-ring: var(--color-focus-ring);
  --bd-grade-1: #88B000;
  --bd-grade-2: #C0E561;
  --bd-grade-3: #4AAFBA;
  --bd-grade-4: #91DEFF;
  --bd-grade-5: #D5A7E2;
  --bd-grade-6: #E4B14F;
  --bd-grade-7: #CA9411;
  --bd-grade-8: #FF93AB;
  --bd-grade-9: #F4698B;
  --bd-color-on-grade: #05131D;
  --bd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bd-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --bd-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
  --bd-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
  --bd-color-surface: var(--color-surface-page);
  --bd-color-surface-raised: var(--color-surface-raised);
  --bd-color-surface-overlay: var(--color-surface-raised);
  --bd-color-surface-overlay-2: var(--color-surface-raised);
  --bd-color-apple-button: #000000;
  --bd-color-on-apple-button: #FFFFFF;
  --bd-color-on-surface: var(--color-heading);
  --bd-color-muted: var(--color-muted);
  --bd-color-border: var(--color-border);
  --bd-color-border-strong: var(--color-muted);
  --bd-color-primary-light: #ABF2FF;
  --bd-color-backdrop-warm: var(--color-surface-page);
  --bd-color-backdrop-sun: var(--color-surface-page);
  --bd-color-backdrop-cool: var(--color-surface-page);
  --bd-color-glass-bg: rgba(255, 255, 255, 0.62);
  --bd-color-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --bd-color-glass-border: rgba(5, 19, 29, 0.08);
  --bd-color-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --bd-color-card-surface: var(--color-surface-raised);
  --bd-color-section-surface: var(--color-surface-page);
  --bd-color-success: #456300;
  --bd-color-on-success: #FFFFFF;
  --bd-color-success-surface: #E4FF9C;
  --bd-color-warning: #7A4C00;
  --bd-color-on-warning: #FFFFFF;
  --bd-color-warning-surface: #FFF2C6;
  --bd-color-danger: var(--color-secondary-text);
  --bd-color-on-danger: #FFFFFF;
  --bd-color-danger-surface: #FFECF1;
  --bd-color-scrim: rgba(5, 19, 29, 0.48);
  --bd-color-focus-ring: var(--color-focus-ring);
  --bd-grade-1: #314A00;
  --bd-grade-2: #5B7E00;
  --bd-grade-3: #00646E;
  --bd-grade-4: #0077AF;
  --bd-grade-5: #885A95;
  --bd-grade-6: #7A4C00;
  --bd-grade-7: #976300;
  --bd-grade-8: #BB355D;
  --bd-grade-9: #780632;
  --bd-color-on-grade: #FFFFFF;
  --bd-shadow-1: 0 1px 2px rgba(5, 19, 29, 0.06), 0 1px 1px rgba(5, 19, 29, 0.04);
  --bd-shadow-2: 0 2px 8px rgba(5, 19, 29, 0.10), 0 1px 2px rgba(5, 19, 29, 0.06);
  --bd-shadow-3: 0 8px 24px rgba(5, 19, 29, 0.14), 0 2px 6px rgba(5, 19, 29, 0.08);
  --bd-shadow-4: 0 16px 48px rgba(5, 19, 29, 0.24);
}