/* Colour tokens for the app (style.css) and the admin panel (admin.css).
   Palette "Papier" (light) and "Nachttinte" (dark) with a verdigris accent.
   Components use these variables instead of literal colours, so a theme is
   a change of values here, not of every rule.

   The scheme follows the system (prefers-color-scheme) unless the user
   picked one in the settings: js/theme.js then sets data-theme="light" or
   "dark" on <html> before the first paint. Text tokens reach WCAG AA
   (4.5:1) on the surfaces they are used on, input borders 3:1. */

/* Typography: system fonts only (no downloads; font-src 'self'). */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-read: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .75rem;      /* 12: metadata, status */
  --fs-sm: .8125rem;    /* 13: previews, hints */
  --fs-ui: .9375rem;    /* 15: UI base */
  --fs-read: 1.0625rem; /* 17: note content */
  --fs-h3: 1.25rem;     /* 20: headings in note content */
}

:root {
  color-scheme: dark;
  /* Surfaces */
  --page: #111416;
  --bg: #111416;
  --surface: #171b1e;
  --surface-alt: #171b1e;
  --surface-2: #262c31;
  --hover: #22282c;
  --hover-2: #1d2226;
  --overlay: rgba(0,0,0,0.6);
  --overlay-soft: rgba(0,0,0,0.25);
  --sidebar: #171b1e;
  --row-hover: #1d2226;
  --row-active: #22282c;
  --toggle-track: #6b767c; /* >= 3:1 on surfaces, the track must stay visible */
  /* Lines */
  --line: #2c3338;
  --line-subtle: #1d2226;
  --line-row: #22282c;
  --line-input: #6b767c;
  --line-strong: #4a5358;
  /* Text */
  --text-bright: #f3f4f2;
  --text: #e7e9e6;
  --text-soft: #c9cecb;
  --text-label: #b3bab8;
  --text-2: #b3bab8;
  --text-3: #8d9794;
  --text-count: #8d9794;
  --text-4: #8d9794;
  --white: #ffffff;
  /* Accent */
  --accent: #5cc4ad;
  --accent-hover: #7fd6c2;
  --accent-hover-bg: #16312b;
  --accent-soft: #16312b;
  --on-accent: #0b1a17;
  /* Status */
  --danger: #f28b82;
  --danger-2: #f28b82;
  --danger-text: #f7a9a2;
  --danger-bg: #3a1d1b;
  --danger-line: #6e2a26;
  --danger-soft: #2a1715;
  --danger-strong: #b8322a;
  --danger-deep: #2a1210;
  --success: #5cc4ad;
  --success-text: #8fdcc9;
  --success-bg: #13302a;
  --green: #2f9e7f;
  --info-text: #9cc3d9;
  --info-bg: #1a2a33;
  --orange: #e6b85c;
  --amber: #e6b85c;
  --amber-light: #f0cc7c;
  --amber-text: #f5dfa8;
  --amber-600: #c9962f;
  --amber-700: #b8862a;
  --amber-dark: #4a3510;
  --amber-deep: #33280f;
  --amber-soft: #33280f;
  --yellow: #b88a2c;
  /* Shadows */
  --shadow-color: rgba(0,0,0,0.45);
  --shadow-color-strong: rgba(0,0,0,0.55);
}

/* The light palette appears twice: for the system setting (here) and for
   an explicit choice (below). Both blocks must stay identical;
   tests/unit/tokens.test.js checks that. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    /* Surfaces */
    --page: #f6f4ef;
    --bg: #f6f4ef;
    --surface: #fdfcf9;
    --surface-alt: #f6f4ef;
    --surface-2: #e9e5dc;
    --hover: #efebe3;
    --hover-2: #e9e5dc;
    --overlay: rgba(28,31,36,0.38);
    --overlay-soft: rgba(28,31,36,0.12);
    --sidebar: #efebe3;
    --row-hover: #f0ece6;
    --row-active: #fdfcf9;
    --toggle-track: #8a8272; /* >= 3:1 on surfaces, the track must stay visible */
    /* Lines */
    --line: #dcd7cc;
    --line-subtle: #ebe7de;
    --line-row: #e3dfd5;
    --line-input: #8a8272;
    --line-strong: #b3ab9c;
    /* Text */
    --text-bright: #14171b;
    --text: #1c1f24;
    --text-soft: #3a3f46;
    --text-label: #4a4f57;
    --text-2: #4a4f57;
    --text-3: #666b72;
    --text-count: #666b72;
    --text-4: #666b72;
    --white: #ffffff;
    /* Accent */
    --accent: #0f6b5c;
    --accent-hover: #0b5549;
    --accent-hover-bg: #dcefe9;
    --accent-soft: #dcefe9;
    --on-accent: #ffffff;
    /* Status */
    --danger: #b42318;
    --danger-2: #b42318;
    --danger-text: #9b1c13;
    --danger-bg: #fbe9e7;
    --danger-line: #e3a39b;
    --danger-soft: #fbe9e7;
    --danger-strong: #b42318;
    --danger-deep: #f7dcd8;
    --success: #0f6b5c;
    --success-text: #0b5549;
    --success-bg: #e3f1ec;
    --green: #1f7a63;
    --info-text: #1f4f6b;
    --info-bg: #e4edf2;
    --orange: #8a5a00;
    --amber: #8a5a00;
    --amber-light: #8a5a00;
    --amber-text: #5c3d00;
    --amber-600: #a36b00;
    --amber-700: #8a5a00;
    --amber-dark: #faf0d9;
    --amber-deep: #faf0d9;
    --amber-soft: #faf0d9;
    --yellow: #b88a2c;
    /* Shadows */
    --shadow-color: rgba(28,31,36,0.12);
    --shadow-color-strong: rgba(28,31,36,0.18);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  /* Surfaces */
  --page: #f6f4ef;
  --bg: #f6f4ef;
  --surface: #fdfcf9;
  --surface-alt: #f6f4ef;
  --surface-2: #e9e5dc;
  --hover: #efebe3;
  --hover-2: #e9e5dc;
  --overlay: rgba(28,31,36,0.38);
  --overlay-soft: rgba(28,31,36,0.12);
  --sidebar: #efebe3;
  --row-hover: #f0ece6;
  --row-active: #fdfcf9;
  --toggle-track: #8a8272; /* >= 3:1 on surfaces, the track must stay visible */
  /* Lines */
  --line: #dcd7cc;
  --line-subtle: #ebe7de;
  --line-row: #e3dfd5;
  --line-input: #8a8272;
  --line-strong: #b3ab9c;
  /* Text */
  --text-bright: #14171b;
  --text: #1c1f24;
  --text-soft: #3a3f46;
  --text-label: #4a4f57;
  --text-2: #4a4f57;
  --text-3: #666b72;
  --text-count: #666b72;
  --text-4: #666b72;
  --white: #ffffff;
  /* Accent */
  --accent: #0f6b5c;
  --accent-hover: #0b5549;
  --accent-hover-bg: #dcefe9;
  --accent-soft: #dcefe9;
  --on-accent: #ffffff;
  /* Status */
  --danger: #b42318;
  --danger-2: #b42318;
  --danger-text: #9b1c13;
  --danger-bg: #fbe9e7;
  --danger-line: #e3a39b;
  --danger-soft: #fbe9e7;
  --danger-strong: #b42318;
  --danger-deep: #f7dcd8;
  --success: #0f6b5c;
  --success-text: #0b5549;
  --success-bg: #e3f1ec;
  --green: #1f7a63;
  --info-text: #1f4f6b;
  --info-bg: #e4edf2;
  --orange: #8a5a00;
  --amber: #8a5a00;
  --amber-light: #8a5a00;
  --amber-text: #5c3d00;
  --amber-600: #a36b00;
  --amber-700: #8a5a00;
  --amber-dark: #faf0d9;
  --amber-deep: #faf0d9;
  --amber-soft: #faf0d9;
  --yellow: #b88a2c;
  /* Shadows */
  --shadow-color: rgba(28,31,36,0.12);
  --shadow-color-strong: rgba(28,31,36,0.18);
}