/* Material 3 Baseline tokens + legacy aliases for Shared.Web.Ui. */

:root {
  color-scheme: dark;

  /* M3 color roles — dark */
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-on-error-container: #f9dedc;
  --md-sys-color-background: #1c1b1f;
  --md-sys-color-on-background: #e6e1e5;
  --md-sys-color-surface: #1c1b1f;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-inverse-surface: #e6e1e5;
  --md-sys-color-inverse-on-surface: #313033;
  --md-sys-color-inverse-primary: #6750a4;
  --md-sys-color-surface-tint: #d0bcff;

  --md-sys-color-surface-container-lowest: #0f0e11;
  --md-sys-color-surface-container-low: #1d1b1f;
  --md-sys-color-surface-container: #211f23;
  --md-sys-color-surface-container-high: #2b292d;
  --md-sys-color-surface-container-highest: #36343b;

  --md-sys-color-scrim: rgba(0, 0, 0, 0.6);

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

  /* Motion */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 400ms;
  --md-sys-motion-duration-extra-long: 500ms;

  /* Elevation (tonal + shadow fallback) */
  --md-sys-elevation-level-0: none;
  --md-sys-elevation-level-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* Legacy aliases — existing components bind to these */
  --page: var(--md-sys-color-background);
  --page-2: var(--md-sys-color-surface-container-lowest);
  --surface: var(--md-sys-color-surface-container-low);
  --surface-strong: var(--md-sys-color-surface-container);
  --surface-soft: var(--md-sys-color-surface-container);
  --surface-bar: var(--md-sys-color-surface);
  --border: var(--md-sys-color-outline-variant);
  --border-strong: var(--md-sys-color-outline);
  --text: var(--md-sys-color-on-surface);
  --text-muted: var(--md-sys-color-on-surface-variant);
  --text-soft: var(--md-sys-color-on-surface-variant);
  --accent: var(--md-sys-color-primary);
  --accent-strong: var(--md-sys-color-primary-container);
  --accent-soft: color-mix(in oklch, var(--md-sys-color-primary) 12%, transparent);
  --focus: color-mix(in oklch, var(--md-sys-color-primary) 24%, transparent);
  --danger: var(--md-sys-color-error);
  --danger-soft: var(--md-sys-color-error-container);
  --success: var(--md-sys-color-tertiary);
  --success-soft: var(--md-sys-color-tertiary-container);
  --warning: var(--md-sys-color-secondary);
  --warning-soft: var(--md-sys-color-secondary-container);
  --info: var(--md-sys-color-primary);
  --info-soft: var(--md-sys-color-primary-container);
  --shadow-lg: var(--md-sys-elevation-level-3);
  --shadow-md: var(--md-sys-elevation-level-2);
  --shadow-sm: var(--md-sys-elevation-level-1);
  --radius-xl: var(--md-sys-shape-extra-large);
  --radius-lg: var(--md-sys-shape-large);
  --radius-md: var(--md-sys-shape-medium);
  --radius-sm: var(--md-sys-shape-small);
  --radius-pill: var(--md-sys-shape-full);
  --font-heading: "Roboto Flex", "Segoe UI", sans-serif;
  --font-body: "Roboto Flex", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --transition-fast: var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  --transition-medium: var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

:root[data-theme="light"] {
  color-scheme: light;

  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;
  --md-sys-color-background: #fffbfe;
  --md-sys-color-on-background: #1c1b1f;
  --md-sys-color-surface: #fffbfe;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #f4eff4;
  --md-sys-color-inverse-primary: #d0bcff;
  --md-sys-color-surface-tint: #6750a4;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f1ecf4;
  --md-sys-color-surface-container-high: #ebe6ee;
  --md-sys-color-surface-container-highest: #e6e0e9;

  --md-sys-elevation-level-1: 0 1px 2px rgba(20, 34, 52, 0.08), 0 1px 3px 1px rgba(20, 34, 52, 0.04);
  --md-sys-elevation-level-2: 0 1px 2px rgba(20, 34, 52, 0.10), 0 2px 6px 2px rgba(20, 34, 52, 0.05);
  --md-sys-elevation-level-3: 0 1px 3px rgba(20, 34, 52, 0.12), 0 4px 8px 3px rgba(20, 34, 52, 0.06);
  --md-sys-elevation-level-4: 0 2px 3px rgba(20, 34, 52, 0.12), 0 6px 10px 4px rgba(20, 34, 52, 0.07);
  --md-sys-elevation-level-5: 0 4px 4px rgba(20, 34, 52, 0.14), 0 8px 12px 6px rgba(20, 34, 52, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in oklch, var(--md-sys-color-primary) 2%, transparent), transparent 32%),
    var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
code {
  font: inherit;
}

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible,
.yg-shell-title:focus,
.yg-shell-title:focus-visible,
.yg-section-title:focus,
.yg-section-title:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

a:focus-visible,
button:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent);
  outline-offset: 3px;
}

.yg-visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}