/* Design tokens. Light is the default; `data-theme="dark"` on <html> switches the palette.
   Brand colours come from the logo: red #e2312a and navy #2a225c. Red is for the brand and
   for "new sheet" (what people come here to do); ordinary actions are navy, so red never
   reads as "danger". */

:root {
  color-scheme: light;

  --navy: #2a225c;
  --navy-deep: #1b1545;
  --red: #e2312a;
  --red-deep: #c4251f;

  --bg: #f3f4f9;
  --surface: #ffffff;
  --surface-muted: #f7f8fc;
  --text: #191b2d;
  --muted: #667085;
  --border: #e3e6ef;
  --border-strong: #cdd3e1;

  --primary: #2a225c;
  --primary-hover: #1d1745;
  --primary-soft: #ecebf8;
  --on-primary: #ffffff;

  --warn-bg: #fff6dc;
  --warn-border: #efc04a;
  --warn-text: #7a5300;
  --ok-bg: #e4f6ec;
  --ok-text: #17693a;
  --danger-bg: #fde9e8;
  --danger-text: #a3201b;
  --info-bg: #e7effd;
  --info-text: #1f4f9c;

  --sidebar-bg: linear-gradient(180deg, #2f2767 0%, #1b1545 100%);
  --sidebar-text: #c9c6e6;
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .08);
  --sidebar-active: rgba(255, 255, 255, .14);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(25, 27, 45, .05);
  --shadow: 0 1px 2px rgba(25, 27, 45, .05), 0 4px 14px rgba(25, 27, 45, .06);
  --shadow-lg: 0 18px 44px rgba(25, 27, 45, .18);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sidebar-width: 268px;
  --topbar-height: 58px;
  --tabbar-height: 64px;
  --page-width: 1120px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1017;
  --surface: #171a25;
  --surface-muted: #1c2030;
  --text: #e8eaf3;
  --muted: #98a0b6;
  --border: #272b3b;
  --border-strong: #383d52;

  /* The navy does not read on a dark background: same hue, with light. */
  --primary: #8178ee;
  --primary-hover: #9b94f3;
  --primary-soft: #26233f;
  --on-primary: #0e1017;

  --warn-bg: #3a2f12;
  --warn-border: #a8822b;
  --warn-text: #f3cd77;
  --ok-bg: #14301f;
  --ok-text: #8fdcab;
  --danger-bg: #3a1c1b;
  --danger-text: #f6a7a3;
  --info-bg: #172540;
  --info-text: #9cc0f5;

  --sidebar-bg: linear-gradient(180deg, #151832 0%, #0e1017 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}