/* Design tokens. Values come from skycast.pen (sc-* light, st-* dark). */

:root {
  --color-ink: #183448;
  --color-ink-2: #58758b;
  --color-ink-3: #66849a;
  --color-accent: #438fc5;
  --color-sun: #edb953;
  --color-logo: #edb953;
  --color-line: #c8ddeb;
  --color-field: #f8fbfd;
  --color-field-line: #bddaeb;
  --color-chip: #d1eaf6;
  --color-card: #f8fcfd;
  --color-card-line: #d1e2ed;
  --color-card-active: #fdfefe;

  --color-panel: #feffff;
  --color-panel-line: #c3dded;
  --color-panel-active: #e5f2fb;
  --color-panel-divider: #edf3f7;
  --shadow-panel: 0 10px 28px rgba(24, 52, 72, 0.1);

  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num: "Inter", "Noto Sans SC", sans-serif;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --page-gutter: 72px;
  --page-top: #e5f2f9;
  --page-bottom: #eff7fa;
}

/* Page background per Weather Scene. Only home, clear, rain and thunderstorm
   are drawn in the design; the rest are interpolated. The canvas Scene is
   painted over this gradient. */
:root[data-scene="clear"] {
  --page-top: #e5f2f9;
  --page-bottom: #edf6fa;
}

:root[data-scene="partly_cloudy"] {
  --page-top: #e2edf3;
  --page-bottom: #eef5f8;
}

:root[data-scene="overcast"] {
  --page-top: #dde5ea;
  --page-bottom: #eef2f5;
}

:root[data-scene="fog"] {
  --page-top: #e4e9ec;
  --page-bottom: #f2f4f5;
}

:root[data-scene="rain"] {
  --page-top: #e0ebf1;
  --page-bottom: #f0f6f8;
}

:root[data-scene="heavy_rain"] {
  --page-top: #d6e2ea;
  --page-bottom: #ecf2f6;
}

:root[data-scene="snow"] {
  --page-top: #e8eff5;
  --page-bottom: #f5f8fb;
}

:root[data-scene="heavy_snow"] {
  --page-top: #e1e9f0;
  --page-bottom: #f1f5f9;
}

/* Thunderstorm is the one dark scene in the design. */
:root[data-scene="thunderstorm"] {
  --color-ink: #edf3f8;
  --color-ink-2: #cad6e1;
  --color-ink-3: #afbfcd;
  --color-accent: #9ebed7;
  --color-sun: #9ebed7;
  --color-logo: #edf3f8;
  --color-line: #4e5f6d;
  --color-field: #2c3c4a;
  --color-field-line: #607a8e;
  --color-chip: #3b5163;
  --color-card: #31424f;
  --color-card-line: #586f81;
  --color-card-active: #435c70;

  --color-panel: #31424f;
  --color-panel-line: #586f81;
  --color-panel-active: #435c70;
  --color-panel-divider: #4e5f6d;
  --shadow-panel: 0 10px 28px rgba(0, 0, 0, 0.35);

  --page-top: #232f3a;
  --page-bottom: #3a4a57;

  color-scheme: dark;
}