/* Design tokens shared by the page, the panels and every widget. */
:root {
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-pixel: "Silkscreen", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Panels and the classic view (day). */
  --bg: #f4f1e8;
  --surface: #fffdf7;
  --surface-2: #f4f0e4;
  --surface-3: #e9e3d3;
  --ink: #1c1b18;
  --ink-2: #57534a;
  --ink-3: #6f6a60;
  --line: rgba(28, 27, 24, 0.12);
  --line-strong: rgba(28, 27, 24, 0.24);
  --focus: #1a73e8;

  /* Per-area accent; panels override these two with the area's colors. */
  --accent: #2a9d8f;
  --accent-deep: #17675d;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));

  /* Glass chrome over the pixel world (Cofounder-style): smoked glass, so white text stays
     readable over bright sky and clouds. */
  --glass: rgba(17, 24, 33, 0.55);
  --glass-strong: rgba(17, 24, 33, 0.7);
  --glass-dark: rgba(16, 22, 30, 0.55);
  --glass-line: rgba(255, 255, 255, 0.22);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow: 0 18px 50px rgba(15, 23, 20, 0.22), 0 2px 8px rgba(15, 23, 20, 0.08);
  --shadow-sm: 0 4px 14px rgba(15, 23, 20, 0.12);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 220ms;
}

:root[data-theme="night"] {
  --bg: #0f1218;
  --surface: #161a22;
  --surface-2: #1d222c;
  --surface-3: #262c38;
  --ink: #f1eee6;
  --ink-2: #b9b5aa;
  --ink-3: #9a968c;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --focus: #8ab4f8;
  --glass: rgba(20, 26, 40, 0.42);
  --glass-strong: rgba(30, 38, 56, 0.6);
  --glass-line: rgba(255, 255, 255, 0.18);
}
/* In night mode the deep accent is too dark to read; text uses the bright accent instead. */
.panel-drawer {
  --accent-deep: var(--hub-deep, #17675d);
}
:root[data-theme="night"] .panel,
:root[data-theme="night"] .panel-drawer,
:root[data-theme="night"] .classic__inner,
:root[data-theme="night"] .help {
  --accent-deep: color-mix(in srgb, var(--accent) 62%, white);
}