/* Umbral shared design tokens. Surface styles may map legacy names to these values. */
:root {
  color-scheme: dark;

  --umbral-color-canvas: #030503;
  --umbral-color-canvas-subtle: #050805;
  --umbral-color-surface: #0a0f0a;
  --umbral-color-surface-raised: #0f160f;
  --umbral-color-surface-muted: #182216;
  --umbral-color-surface-inverse: #050805;
  --umbral-color-surface-glass: rgba(255, 255, 255, 0.03);
  --umbral-color-surface-hover: rgba(255, 255, 255, 0.055);
  --umbral-color-text: #ffffff;
  --umbral-color-text-soft: rgba(255, 255, 255, 0.95);
  --umbral-color-text-muted: rgba(255, 255, 255, 0.78);
  --umbral-color-text-subtle: rgba(255, 255, 255, 0.68);
  --umbral-color-text-inverse: #fffdf7;
  --umbral-color-text-inverse-muted: #c4cec7;
  --umbral-color-accent: #d6b85b;
  --umbral-color-accent-text: #d6b85b;
  --umbral-color-accent-strong: #f0d989;
  --umbral-color-accent-deep: #b8871e;
  --umbral-color-accent-soft: rgba(214, 184, 91, 0.17);
  --umbral-color-accent-line: rgba(214, 184, 91, 0.36);
  --umbral-color-on-accent: #171a18;
  --umbral-color-on-accent-strong: #171a18;
  --umbral-color-brand: #153e2d;
  --umbral-color-brand-strong: #215b43;
  --umbral-color-on-brand: #fffdf7;
  --umbral-color-success: #85b878;
  --umbral-color-warning: #e3b95f;
  --umbral-color-danger: #e28d81;
  --umbral-color-on-danger: #171a18;
  --umbral-color-info: #8fb7d2;
  --umbral-color-border-subtle: rgba(255, 255, 255, 0.09);
  --umbral-color-border-default: rgba(216, 180, 118, 0.2);
  --umbral-color-border-strong: rgba(216, 180, 118, 0.42);

  --umbral-font-body: "Open Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --umbral-font-display: "Open Sans", Georgia, serif;
  --umbral-font-mono: "Open Sans", "SF Mono", ui-monospace, monospace;
  --umbral-font-size-body: 1rem;
  --umbral-font-size-supporting: 0.75rem;
  --umbral-font-size-control: 0.875rem;
  --umbral-line-height-body: 1.6;
  --umbral-line-height-tight: 1.2;

  --umbral-space-1: 0.25rem;
  --umbral-space-2: 0.5rem;
  --umbral-space-3: 0.75rem;
  --umbral-space-4: 1rem;
  --umbral-space-5: 1.25rem;
  --umbral-space-6: 1.5rem;
  --umbral-space-7: 2rem;
  --umbral-space-8: 3rem;

  --umbral-radius-small: 4px;
  --umbral-radius-control: 7px;
  --umbral-radius-card: 10px;
  --umbral-radius-dialog: 14px;
  --umbral-radius-pill: 999px;
  --umbral-border-subtle: 1px solid var(--umbral-color-border-subtle);
  --umbral-border-default: 1px solid var(--umbral-color-border-default);
  --umbral-border-strong: 1px solid var(--umbral-color-border-strong);
  --umbral-shadow-raised: 0 18px 50px rgba(0, 0, 0, 0.38);
  --umbral-shadow-dialog: 0 40px 110px rgba(0, 0, 0, 0.55);
  --umbral-focus-ring: 0 0 0 3px rgba(240, 217, 137, 0.42);

  --umbral-layer-base: 0;
  --umbral-layer-raised: 10;
  --umbral-layer-navigation: 120;
  --umbral-layer-overlay: 900;
  --umbral-layer-dialog: 1000;
  --umbral-layer-toast: 4000;
  --umbral-control-height-small: 36px;
  --umbral-control-height: 44px;
  --umbral-control-height-large: 52px;
  --umbral-duration-fast: 160ms;
  --umbral-duration-standard: 240ms;
  --umbral-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --umbral-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --umbral-loading-logo-size: 190px;
  --umbral-loading-indicator-width: 128px;
  --umbral-loading-animation-duration: 1150ms;
  --umbral-loading-title-size: 24px;
  --umbral-loading-detail-size: 12px;
}

[data-theme="light"] {
  color-scheme: light;
  --umbral-color-canvas: #f7f4eb;
  --umbral-color-canvas-subtle: #eee9dc;
  --umbral-color-surface: #fffdf7;
  --umbral-color-surface-raised: #f3f1e8;
  --umbral-color-surface-muted: #e8eee4;
  --umbral-color-surface-inverse: #050805;
  --umbral-color-surface-glass: rgba(21, 62, 45, 0.035);
  --umbral-color-surface-hover: rgba(21, 62, 45, 0.075);
  --umbral-color-text: #171a18;
  --umbral-color-text-soft: #191d1a;
  --umbral-color-text-muted: #303833;
  --umbral-color-text-subtle: #465049;
  --umbral-color-text-inverse: #fffdf7;
  --umbral-color-text-inverse-muted: #c4cec7;
  --umbral-color-accent: #9b7532;
  --umbral-color-accent-text: #67491b;
  --umbral-color-accent-strong: #765724;
  --umbral-color-accent-deep: #67491b;
  --umbral-color-accent-soft: rgba(174, 139, 73, 0.14);
  --umbral-color-accent-line: rgba(139, 101, 38, 0.42);
  --umbral-color-on-accent: #050805;
  --umbral-color-on-accent-strong: #fffdf7;
  --umbral-color-brand: #153e2d;
  --umbral-color-brand-strong: #215b43;
  --umbral-color-on-brand: #fffdf7;
  --umbral-color-success: #2f6940;
  --umbral-color-warning: #8a642e;
  --umbral-color-danger: #9b3f32;
  --umbral-color-on-danger: #fffdf7;
  --umbral-color-info: #3b587a;
  --umbral-color-border-subtle: rgba(21, 62, 45, 0.12);
  --umbral-color-border-default: rgba(21, 62, 45, 0.19);
  --umbral-color-border-strong: rgba(21, 62, 45, 0.34);
  --umbral-shadow-raised: 0 14px 36px rgba(39, 48, 38, 0.12);
  --umbral-shadow-dialog: 0 28px 70px rgba(39, 48, 38, 0.16);
  --umbral-focus-ring: 0 0 0 3px rgba(118, 87, 36, 0.3);
}

[data-theme="disco"] {
  color-scheme: dark;
  --umbral-color-canvas: #090313;
  --umbral-color-canvas-subtle: #160725;
  --umbral-color-surface: #160c25;
  --umbral-color-surface-raised: #25113b;
  --umbral-color-surface-muted: #321750;
  --umbral-color-surface-inverse: #08020f;
  --umbral-color-surface-glass: rgba(255, 255, 255, 0.075);
  --umbral-color-surface-hover: rgba(90, 244, 255, 0.14);
  --umbral-color-text: #fffaff;
  --umbral-color-text-soft: #fff5fc;
  --umbral-color-text-muted: #eadcf4;
  --umbral-color-text-subtle: #d1bfdf;
  --umbral-color-text-inverse: #fffaff;
  --umbral-color-text-inverse-muted: #e7d8ef;
  --umbral-color-accent: #ff56d7;
  --umbral-color-accent-text: #ff8be4;
  --umbral-color-accent-strong: #63f5ff;
  --umbral-color-accent-deep: #b833ff;
  --umbral-color-accent-soft: rgba(255, 86, 215, 0.2);
  --umbral-color-accent-line: rgba(99, 245, 255, 0.48);
  --umbral-color-on-accent: #16051f;
  --umbral-color-on-accent-strong: #071318;
  --umbral-color-brand: #5b168d;
  --umbral-color-brand-strong: #8b25bd;
  --umbral-color-on-brand: #fffaff;
  --umbral-color-success: #9cff57;
  --umbral-color-warning: #ffd45f;
  --umbral-color-danger: #ff7b88;
  --umbral-color-on-danger: #21040c;
  --umbral-color-info: #63f5ff;
  --umbral-color-border-subtle: rgba(99, 245, 255, 0.18);
  --umbral-color-border-default: rgba(255, 86, 215, 0.34);
  --umbral-color-border-strong: rgba(99, 245, 255, 0.58);
  --umbral-shadow-raised: 0 18px 52px rgba(8, 1, 18, 0.52), 0 0 28px rgba(184, 51, 255, 0.12);
  --umbral-shadow-dialog: 0 42px 120px rgba(5, 0, 13, 0.7), 0 0 70px rgba(255, 86, 215, 0.18);
  --umbral-focus-ring: 0 0 0 3px rgba(99, 245, 255, 0.46), 0 0 24px rgba(255, 86, 215, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --umbral-duration-fast: 0.01ms;
    --umbral-duration-standard: 0.01ms;
  }
}