/* GuideLock design tokens. Shared by the homepage (site.html) and the workspace (app.html, auth.html).
   Display: Bricolage Grotesque. Text: Instrument Sans. Code and citations: JetBrains Mono.
   Palette: warm paper, deep green-black ink, and three signal colours that always carry the same meaning:
   green = verified by code, red = refer urgently, amber = rising. */
:root {
  --f-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --paper: #f2f0eb;
  --paper-2: #e9e6de;
  --card: #fbfaf7;
  --card-2: #f5f3ee;
  --ink: #0d1411;
  --ink-2: #3b4541;
  --muted: #7f8782;
  --line: rgba(13, 20, 17, 0.09);
  --line-2: rgba(13, 20, 17, 0.16);

  --night: #0a0f0d;
  --night-2: #111916;
  --night-3: #19231f;
  --on-night: #eef2ef;
  --on-night-2: #9eaaa4;
  --night-line: rgba(238, 242, 239, 0.09);

  --green: #0f9f63;
  --green-ink: #0b7a4b;
  --green-soft: #daf2e5;
  --green-glow: #3ee08f;
  --red: #e5402f;
  --red-ink: #b42318;
  --red-soft: #fde6e2;
  --amber: #e8930c;
  --amber-ink: #8a5a00;
  --amber-soft: #fcefd4;
  --blue: #2f6fe4;
  --blue-soft: #e1ebfc;
  --hl: #ffd84d;

  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-1: 0 1px 2px rgba(13, 20, 17, 0.05), 0 2px 8px rgba(13, 20, 17, 0.04);
  --shadow-2: 0 2px 6px rgba(13, 20, 17, 0.05), 0 18px 48px rgba(13, 20, 17, 0.10);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Workspace dark theme (the homepage is light with dark panels). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ws {
    --paper: #0b100e; --paper-2: #111916; --card: #121a17; --card-2: #17211d;
    --ink: #eef2ef; --ink-2: #b9c4be; --muted: #7d8a84; --line: rgba(238, 242, 239, 0.08); --line-2: rgba(238, 242, 239, 0.15);
    --green: #2fc47f; --green-ink: #5ee0a0; --green-soft: #12301f; --red: #f0604f; --red-ink: #ff8c7e; --red-soft: #3a1714;
    --amber: #f2a93b; --amber-ink: #f6c46e; --amber-soft: #33260e; --blue: #5b8ff0; --blue-soft: #14233f;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] .ws {
  --paper: #0b100e; --paper-2: #111916; --card: #121a17; --card-2: #17211d;
  --ink: #eef2ef; --ink-2: #b9c4be; --muted: #7d8a84; --line: rgba(238, 242, 239, 0.08); --line-2: rgba(238, 242, 239, 0.15);
  --green: #2fc47f; --green-ink: #5ee0a0; --green-soft: #12301f; --red: #f0604f; --red-ink: #ff8c7e; --red-soft: #3a1714;
  --amber: #f2a93b; --amber-ink: #f6c46e; --amber-soft: #33260e; --blue: #5b8ff0; --blue-soft: #14233f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.45);
}