/* Theme overrides for tokens */
@media (prefers-color-scheme: dark){
  .theme-auto{
    --bg: #0b1119;
    --bg-elevated: #0f1621;
    --ink: #edf2f8;
    --muted: #a8b2c4;
    --card: rgba(19, 28, 41, 0.86);
    --card-strong: rgba(21, 33, 49, 0.95);
    --border: rgba(67, 88, 113, 0.48);
    --border-strong: rgba(104, 136, 172, 0.72);

    --accent: #5fd0c8;
    --accent-strong: #39b8ae;
    --accent-ink: #041016;
    --accent-soft: rgba(95, 208, 200, 0.15);
    --surface-tint: rgba(95, 208, 200, 0.08);
    --surface-hover: rgba(95, 208, 200, 0.2);

    --gradient-app:
      radial-gradient(circle at 8% 10%, rgba(95, 208, 200, 0.17), transparent 33%),
      radial-gradient(circle at 82% 0%, rgba(109, 153, 255, 0.15), transparent 30%),
      linear-gradient(180deg, #0b1119 0%, #0f1723 45%, #0b1119 100%);
    --gradient-hero: linear-gradient(145deg, rgba(109, 153, 255, 0.2), rgba(95, 208, 200, 0.06) 45%, rgba(13, 22, 34, 0.76));
    --gradient-panel: linear-gradient(180deg, rgba(95, 208, 200, 0.08), rgba(95, 208, 200, 0));
    --gradient-band: linear-gradient(180deg, rgba(19, 33, 48, 0.75), rgba(11, 17, 25, 0));
    --gradient-footer: linear-gradient(180deg, rgba(16, 26, 39, 0.7), rgba(11, 17, 25, 0));
  }
}

@media (prefers-color-scheme: light){
  .theme-auto{
    --bg: #f2f6fb;
    --bg-elevated: #f8fbff;
    --ink: #152232;
    --muted: #55657a;
    --card: rgba(255, 255, 255, 0.9);
    --card-strong: rgba(255, 255, 255, 0.98);
    --border: rgba(169, 189, 213, 0.55);
    --border-strong: rgba(120, 162, 204, 0.85);

    --accent: #1e8c8d;
    --accent-strong: #157073;
    --accent-ink: #f4fdff;
    --accent-soft: rgba(30, 140, 141, 0.13);
    --surface-tint: rgba(30, 140, 141, 0.09);
    --surface-hover: rgba(30, 140, 141, 0.16);

    --gradient-app:
      radial-gradient(circle at 10% 8%, rgba(100, 182, 255, 0.2), transparent 35%),
      radial-gradient(circle at 88% 0%, rgba(95, 208, 200, 0.17), transparent 32%),
      linear-gradient(180deg, #f3f7fc 0%, #edf4fb 46%, #f4f8fc 100%);
    --gradient-hero: linear-gradient(145deg, rgba(108, 170, 255, 0.2), rgba(95, 208, 200, 0.17), rgba(255, 255, 255, 0.82));
    --gradient-panel: linear-gradient(180deg, rgba(95, 208, 200, 0.13), rgba(95, 208, 200, 0));
    --gradient-band: linear-gradient(180deg, rgba(180, 208, 236, 0.5), rgba(243, 247, 252, 0));
    --gradient-footer: linear-gradient(180deg, rgba(202, 220, 241, 0.5), rgba(244, 248, 252, 0));
  }
}

.theme-dark{
  --bg: #0b1119;
  --bg-elevated: #0f1621;
  --ink: #edf2f8;
  --muted: #a8b2c4;
  --card: rgba(19, 28, 41, 0.86);
  --card-strong: rgba(21, 33, 49, 0.95);
  --border: rgba(67, 88, 113, 0.48);
  --border-strong: rgba(104, 136, 172, 0.72);

  --accent: #5fd0c8;
  --accent-strong: #39b8ae;
  --accent-ink: #041016;
  --accent-soft: rgba(95, 208, 200, 0.15);
  --surface-tint: rgba(95, 208, 200, 0.08);
  --surface-hover: rgba(95, 208, 200, 0.2);

  --gradient-app:
    radial-gradient(circle at 8% 10%, rgba(95, 208, 200, 0.17), transparent 33%),
    radial-gradient(circle at 82% 0%, rgba(109, 153, 255, 0.15), transparent 30%),
    linear-gradient(180deg, #0b1119 0%, #0f1723 45%, #0b1119 100%);
  --gradient-hero: linear-gradient(145deg, rgba(109, 153, 255, 0.2), rgba(95, 208, 200, 0.06) 45%, rgba(13, 22, 34, 0.76));
  --gradient-panel: linear-gradient(180deg, rgba(95, 208, 200, 0.08), rgba(95, 208, 200, 0));
  --gradient-band: linear-gradient(180deg, rgba(19, 33, 48, 0.75), rgba(11, 17, 25, 0));
  --gradient-footer: linear-gradient(180deg, rgba(16, 26, 39, 0.7), rgba(11, 17, 25, 0));
}

.theme-light{
  --bg: #f2f6fb;
  --bg-elevated: #f8fbff;
  --ink: #152232;
  --muted: #55657a;
  --card: rgba(255, 255, 255, 0.9);
  --card-strong: rgba(255, 255, 255, 0.98);
  --border: rgba(169, 189, 213, 0.55);
  --border-strong: rgba(120, 162, 204, 0.85);

  --accent: #1e8c8d;
  --accent-strong: #157073;
  --accent-ink: #f4fdff;
  --accent-soft: rgba(30, 140, 141, 0.13);
  --surface-tint: rgba(30, 140, 141, 0.09);
  --surface-hover: rgba(30, 140, 141, 0.16);

  --gradient-app:
    radial-gradient(circle at 10% 8%, rgba(100, 182, 255, 0.2), transparent 35%),
    radial-gradient(circle at 88% 0%, rgba(95, 208, 200, 0.17), transparent 32%),
    linear-gradient(180deg, #f3f7fc 0%, #edf4fb 46%, #f4f8fc 100%);
  --gradient-hero: linear-gradient(145deg, rgba(108, 170, 255, 0.2), rgba(95, 208, 200, 0.17), rgba(255, 255, 255, 0.82));
  --gradient-panel: linear-gradient(180deg, rgba(95, 208, 200, 0.13), rgba(95, 208, 200, 0));
  --gradient-band: linear-gradient(180deg, rgba(180, 208, 236, 0.5), rgba(243, 247, 252, 0));
  --gradient-footer: linear-gradient(180deg, rgba(202, 220, 241, 0.5), rgba(244, 248, 252, 0));
}