/* Theme variables and tokens */
:root {
  color-scheme: light;
  --ux-page: #EDF0F3;
  --ux-surface: #FFFFFF;
  --ux-surface-2: #F3F5F8;
  --ux-surface-3: #E4E9EF;
  --ux-ink: #16283F;
  --ux-ink-2: #4E6078;
  --ux-ink-3: #8796A8;
  --ux-line: rgba(22, 40, 63, .09);
  --ux-line-2: rgba(22, 40, 63, .18);
  --ux-accent: #1F4E79;
  --ux-accent-2: #2E75B6;
  --ux-accent-soft: rgba(31, 78, 121, .10);
  --ux-accent-ink: #FFFFFF;
  --ux-heat: #174A6E;
  --ux-mint: #174A6E;
  --ux-warn: #9A6B1F;
  --ux-danger: #B4232A;
  --ux-glass: rgba(255, 255, 255, .58);
  --ux-glass-line: rgba(255, 255, 255, .85);
  --ux-shadow: rgba(22, 40, 63, .14);
  --ux-shadow-strong: rgba(22, 40, 63, .3);
  --ux-grad: linear-gradient(120deg, #174A6E, #2E75B6 55%, #5B8DB8);
  --ux-ease: cubic-bezier(.2, .8, .2, 1);
  --ux-spring: cubic-bezier(.34, 1.45, .64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ux-page: #0A121E;
    --ux-surface: #111D2E;
    --ux-surface-2: #172639;
    --ux-surface-3: #1E3249;
    --ux-ink: #E9EFF6;
    --ux-ink-2: rgba(233, 239, 246, .68);
    --ux-ink-3: rgba(233, 239, 246, .42);
    --ux-line: rgba(255, 255, 255, .08);
    --ux-line-2: rgba(255, 255, 255, .16);
    --ux-accent: #8FB6DC;
    --ux-accent-2: #6E9CCB;
    --ux-accent-soft: rgba(143, 182, 220, .14);
    --ux-accent-ink: #0A121E;
    --ux-heat: #8FB6DC;
    --ux-mint: #8FB6DC;
    --ux-warn: #D9A441;
    --ux-danger: #F08A8A;
    --ux-glass: rgba(255, 255, 255, .07);
    --ux-glass-line: rgba(255, 255, 255, .18);
    --ux-shadow: rgba(0, 0, 0, .45);
    --ux-shadow-strong: rgba(0, 0, 0, .72);
    --ux-grad: linear-gradient(120deg, #8FB6DC, #6E9CCB 55%, #4A739E);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ux-page: #0A121E;
  --ux-surface: #111D2E;
  --ux-surface-2: #172639;
  --ux-surface-3: #1E3249;
  --ux-ink: #E9EFF6;
  --ux-ink-2: rgba(233, 239, 246, .68);
  --ux-ink-3: rgba(233, 239, 246, .42);
  --ux-line: rgba(255, 255, 255, .08);
  --ux-line-2: rgba(255, 255, 255, .16);
  --ux-accent: #8FB6DC;
  --ux-accent-2: #6E9CCB;
  --ux-accent-soft: rgba(143, 182, 220, .14);
  --ux-accent-ink: #0A121E;
  --ux-heat: #8FB6DC;
  --ux-mint: #8FB6DC;
  --ux-warn: #D9A441;
  --ux-danger: #F08A8A;
  --ux-glass: rgba(255, 255, 255, .07);
  --ux-glass-line: rgba(255, 255, 255, .18);
  --ux-shadow: rgba(0, 0, 0, .45);
  --ux-shadow-strong: rgba(0, 0, 0, .72);
  --ux-grad: linear-gradient(120deg, #8FB6DC, #6E9CCB 55%, #4A739E);
}