/* Copied from app/src/theme/colors.json and tokens.ts. Change them there first. */
:root {
  color-scheme: light dark;

  --background: #F1F3F7;
  --card: #FFFFFF;
  --raised: #F3F3F4;
  --border: #E2E2E4;
  --text: #0A0F1F;
  --text-secondary: #696D76;
  --text-faint: #5D616D;
  --accent: #48857D;
  --accent-edge: #315A55;
  --on-accent: #0A0F1F;
  --accent-text: #427A73;
  --tint: #E7EFEE;
  --tint-text: #3D706A;
  --tint-text-secondary: #5D616D;
  --on-marker: #0A0F1F;
  --danger: #C62828;
  --level-a: #DCEDE4;
  --level-a-text: #137440;
  --paper: #FFFFFF;
  --on-paper: #0A0F1F;
  --paper-text-secondary: #6E7179;
  --paper-surface: #F1F3F7;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.08);
  --shadow-popup: 0 2px 4px rgba(15, 23, 42, 0.1), 0 14px 36px rgba(15, 23, 42, 0.28);

  /* The same in both themes. */
  --marker: #FF8A8A;
  --stage: #000000;
  --stage-text: #FFFFFF;
  --stage-text-secondary: #C4C8D0;
  --stage-text-dim: #A9AEB8;
  --stage-track: #2A2D34;
  --stage-divider: #3A3E47;
  --stage-card: #1C1E24;
  --stage-card-border: #2E3138;
  --stage-accent: #48857D;
  --stage-accent-edge: #315A55;
  --on-stage-accent: #0A0F1F;
  --again: #FFE3E3;
  --on-again: #A61B1B;
  --again-edge: #F2B5B5;
  --good: #15803D;
  --on-good: #FFFFFF;
  --good-edge: #0F5C2B;
  --scene-teal: #3E726C;
  --scene-teal-edge: #C9D8D6;
  --scene-mint: #BFE3D6;
  --scene-night: #0E1B33;
  --moon: #FFE9B0;
  --white: #FFFFFF;
  --ink: #0A0F1F;
  /* Text on surfaces that stay white in Dark too (chips, cards, widgets, the main sections). */
  --on-white-secondary: #6E7179;
  --on-white-accent: #427A73;
  --on-white-line: #E2E2E4;
  --on-white-field: #F1F3F7;
  --widget-text-secondary: #DCEFE8;

  --radius-thumbnail: 10px;
  --radius-button: 16px;
  --radius-card: 16px;
  --radius-panel: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0B0F1A;
    --card: #20242E;
    --raised: #2F333C;
    --border: #393D47;
    --text: #F4F6FB;
    --text-secondary: #9EA0A7;
    --text-faint: #A0A3AA;
    --accent-text: #659992;
    --tint: #2A3D43;
    --tint-text: #8AB1AC;
    --tint-text-secondary: #A8AAB1;
    --danger: #D86D6D;
    --level-a: #1D4337;
    --level-a-text: #74B994;
    --paper: #000000;
    --on-paper: #FFFFFF;
    --paper-text-secondary: #8C8C8C;
    --paper-surface: #16181E;
    --shadow-card: inset 0 0 0 1px #393D47, 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-popup: inset 0 0 0 1px #393D47, 0 14px 36px rgba(0, 0, 0, 0.55);
  }
}