/* The café's palette, light and type, from docs/ART-DIRECTION.md.
   Shared by the window, the room and the send page. These are starting
   values: tune them against the real room, and keep text at 4.5:1. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap");

:root {
  /* Day palette. */
  --plaster: #F3E6D0;
  --wood: #C98B4E;
  --ink: #3B2A20;
  --terracotta: #C8643B;
  --sage: #8FA37E;
  --lamp: #F2C66D;
  --window: #BFD6DA;

  /* Derived. */
  --paper: #FBF4E6;        /* cards, bubbles, the receipt */
  --muted: #6E5646;        /* secondary text, 4.5:1 on --plaster */
  --rule: #DCC8A8;
  --accent-ink: #8E3F22;   /* terracotta dark enough for text, 4.5:1 on --plaster in every day light */
  --follow: #F6DC9C;       /* the lamp, soft enough to sit behind --ink: your agent's lines */
  --shadow: rgba(59, 42, 32, 0.12);

  /* The light over the room: a tint and how strongly lamps glow. */
  --light-tint: rgba(255, 196, 120, 0.10);
  --lamp-glow: 0;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --slow: 600ms;

  color-scheme: light;
}

/* The page sets data-light on <html> from the watcher's local time. */
:root[data-light="morning"] {
  --light-tint: rgba(200, 225, 235, 0.12);
  --lamp-glow: 0;
}

:root[data-light="afternoon"] {
  --light-tint: rgba(255, 196, 120, 0.10);
  --lamp-glow: 0.15;
}

:root[data-light="evening"] {
  --light-tint: rgba(230, 140, 70, 0.18);
  --lamp-glow: 0.6;
}

:root[data-light="night"] {
  --plaster: #2A2026;
  --wood: #7A5235;
  --ink: #F1E4D2;
  --terracotta: #A8502F;
  --sage: #5E6F55;
  --lamp: #FFB65C;
  --window: #2E3F5C;

  --paper: #3A2D30;
  --muted: #C9B7A3;
  --rule: #4E3E3C;
  --accent-ink: #E8946A;
  --follow: #5A4430;
  --shadow: rgba(0, 0, 0, 0.35);

  --light-tint: rgba(30, 40, 80, 0.25);
  --lamp-glow: 1;

  color-scheme: dark;
}

body {
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--font-ui);
  transition: background-color var(--slow) var(--ease), color var(--slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root { --slow: 0ms; }
}