/*
 * Design tokens - the only place colours and fonts are defined. Every other rule uses
 * var(--...), so the whole look can be reskinned by editing this file alone.
 *
 * Values follow the approved reference, design/app-reference.html; the names are ours
 * and the landing page's (--bg, --surface, --ink, --ink-soft, --muted, --line, --accent,
 * --amber), with a few more the reference needs.
 * Day: warm paper, near-black ink. Night: near-black, warm amber ink.
 */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;

  --bg: #f3ede1;
  /* The sidebar, hovers and sunken boxes. */
  --sunken: #ece3d3;
  /* Panels and cards. */
  --surface: #f7f2e8;
  --line: #d9cdb6;
  --line-soft: #e3d9c6;
  --ink: #1c1813;
  --ink-soft: #4a4235;
  --muted: #7a6f5c;
  --accent: #8a5a2b;
  --accent-soft: #b98a54;
  --amber: #b9822b;
  /* Text on an --accent background. */
  --on-accent: #ffffff;
  /* A selected row, and the clause a link points to. */
  --selected: #e7dcc4;
  --highlight: #e7dcc4;

  /* Risk: the colour of a mark, and a tint to set a label on. */
  --risk-red: #a3341f;
  --risk-red-tint: #efd9cf;
  --risk-yellow: #b9822b;
  --risk-yellow-tint: #f0e2c4;
  --risk-green: #5b7a3f;
  --risk-green-tint: #dde6c9;

  /* Contract statuses in the companies' bars and legend (design/companies-reference.html):
     in force green, drafts neutral, expired a muted brown, terminated dark. */
  --status-active: #5b7a3f;
  --status-draft: #aa9e86;
  --status-expired: #8a5148;
  --status-terminated: #4a4235;

  /* The way into the contract text: ink by day, the accent by night. */
  --entry-bg: #1c1813;
  --entry-ink: #f3ede1;

  /* Behind the sidebar when it opens as a drawer. */
  --backdrop: #00000066;
  /* Under a small form that opens over the page, such as the status editor. */
  --popover-shadow: 0 8px 24px #1c181326;

  /* The landing page's WebGL scene (js/landing-scene.js) reads these. */
  --scene-bg: var(--bg);
  --scene-paper: var(--surface);
  --scene-ink: var(--ink);
  --scene-red: var(--risk-red);
  --scene-amber: var(--amber);
  --scene-brightness: 1;
  /* Behind the landing page's copy: opaque enough that headline and body keep 7:1
     contrast over any pixel of the scene. */
  --scrim: #f3ede1ee;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
}

/* Night follows the landing page: a near-black ground, bright amber ink, and a coral
   accent that stays clearly apart from the ink. Risk colours sit away from both, so a
   red mark never reads as a link. */
[data-theme="night"] {
  color-scheme: dark;

  --bg: #0b0906;
  --sunken: #100d09;
  --surface: #14100b;
  --line: #2c2318;
  --line-soft: #1f1912;
  --ink: #f0c079;
  --ink-soft: #d6a860;
  --muted: #8f7048;
  --accent: #e2603f;
  --accent-soft: #f07c5e;
  --amber: #e6a032;
  --on-accent: #0b0906;
  --selected: #241b11;
  --highlight: #2b1f13;

  --risk-red: #f2606e;
  --risk-red-tint: #3a1519;
  --risk-yellow: #ffd23f;
  --risk-yellow-tint: #332a0c;
  --risk-green: #8fcf86;
  --risk-green-tint: #16301b;

  --status-active: #8fcf86;
  --status-draft: #7d6b4c;
  --status-expired: #b3705a;
  --status-terminated: #c9b89a;

  /* The way into the text: amber ink on near-black, as ink on paper by day. */
  --entry-bg: #f0c079;
  --entry-ink: #0b0906;

  --backdrop: #000000a6;
  --popover-shadow: 0 8px 24px #000000b3;

  /* The scene's sheets are lighter than the ground; its strokes glow amber at night. */
  --scene-paper: #3b3020;
  --scene-brightness: 0.62;
  --scrim: #0b0906ee;
}