/* Light and dark appearance tokens. */

:root {
  color-scheme: light;

  /* Core palette */
  --canvas: #f7fbf5;
  --mint: #ddf3e7;
  --lagoon: #62c6bd;
  --deep: #0e6672;
  --sun: #f4c95d;
  --coral: #f06f61;
  --ink: #173d43;

  /* Derived surfaces */
  --card: #ffffff;
  --line: #d6ebe2;
  --muted: #597b7f;
  --on-accent: #ffffff;
  --on-coral: #ffffff;

  /* Water */
  --water-top: #cdeef0;
  --water-mid: #8fd6d8;
  --water-deep: #3fa3ae;
  --glass: rgba(255, 255, 255, 0.55);
  --gravel: #c9b79a;
  --glass-frame: #eef6f4;
  --shine: rgba(255, 255, 255, 0.34);

  /* Status */
  --ok: #3dbe7a;
  --warn: #e8b84b;
  --bad: #e0503f;
  --warm-panel: #fff6e0;
  --warm-panel-end: #ffeec6;
  --warm-line: #f0dca8;
  --hover-card: #ffffff;
  --guide-line: #bfded6;
  --guide-fill: rgba(221, 243, 231, 0.18);
  --guide-label: rgba(247, 251, 245, 0.9);
  --remove-surface: #fdeeeb;
  --status-fish-top: #f4fbf8;
  --status-fish-bottom: #dff3ec;
  --meter-track-top: #eaf4f2;
  --meter-track-bottom: #dbeae8;
  --flagged-surface: #fff5f3;
  --bad-border: #f5cdc7;
  --bad-surface: #fff7f6;
  --warn-border: #f2e2b6;
  --warn-surface: #fffdf5;
  --good-border: #bfe8d3;
  --good-surface: #f6fdf9;
  --problem-block-surface: #fde3df;
  --problem-warn-surface: #fdf2d8;
  --problem-fix-surface: rgba(255, 255, 255, 0.72);
  --good-tick-surface: #d6f5e4;
  --toast-surface: #173d43;
  --toast-ink: #ffffff;
  --overlay: rgba(9, 45, 52, 0.45);
  --fish-sheet-top: #eaf7f2;
  --fish-sheet-bottom: #a5dcd6;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space + shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(14, 102, 114, 0.1);
  --shadow-md: 0 6px 20px rgba(14, 102, 114, 0.14);
  --shadow-lg: 0 16px 44px rgba(14, 102, 114, 0.2);

  /* Every tappable thing is at least this big — small hands, small phones. */
  --tap: 48px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #081417;
  --mint: #19363a;
  --lagoon: #54c7c1;
  --deep: #6edbd4;
  --sun: #f2c85d;
  --coral: #ff7c6f;
  --ink: #e9f5f3;
  --card: #102326;
  --line: #29474c;
  --muted: #9bb9ba;
  --on-accent: #062124;
  --on-coral: #1e0806;
  --water-top: #193a43;
  --water-mid: #17515a;
  --water-deep: #0b3540;
  --glass: rgba(207, 243, 242, 0.16);
  --gravel: #89745a;
  --glass-frame: #43656a;
  --shine: rgba(220, 255, 255, 0.14);
  --ok: #55d58e;
  --warn: #f0c55e;
  --bad: #ff7565;
  --warm-panel: #302818;
  --warm-panel-end: #3b311d;
  --warm-line: #695831;
  --hover-card: #183035;
  --guide-line: #31565b;
  --guide-fill: rgba(25, 54, 58, 0.2);
  --guide-label: rgba(16, 35, 38, 0.92);
  --remove-surface: #3a2020;
  --status-fish-top: #102a2e;
  --status-fish-bottom: #173d42;
  --meter-track-top: #193336;
  --meter-track-bottom: #10282c;
  --flagged-surface: #351e1d;
  --bad-border: #6d3834;
  --bad-surface: #321d1d;
  --warn-border: #665a32;
  --warn-surface: #302b1d;
  --good-border: #315f47;
  --good-surface: #173024;
  --problem-block-surface: #4a2522;
  --problem-warn-surface: #453a1d;
  --problem-fix-surface: rgba(8, 20, 23, 0.62);
  --good-tick-surface: #1d4933;
  --toast-surface: #d6efec;
  --toast-ink: #081719;
  --overlay: rgba(0, 5, 7, 0.7);
  --fish-sheet-top: #153439;
  --fish-sheet-bottom: #1d5960;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}