/*
 * Design tokens — the "Sunny Notes" scrapbook direction.
 * Chosen in specs/001-phrase-memory-sharing/mockups/ (research.md R12).
 *
 * Everything visual is declared here and referenced by name in app.css.
 * User-selectable themes are out of scope, but keeping the palette in one
 * token block is what makes a future theme a swap of this file rather than a
 * redesign. Do not hard-code a colour or a font anywhere else.
 */

:root {
  /* surface */
  --cork: #f7efdd;
  --cork-dots: rgba(58, 50, 38, 0.05);
  --paper: #fffdf5;
  --white: #ffffff;

  /* ink */
  --ink: #3a3226;
  --ink-soft: #8a7d68;
  --ink-line: rgba(58, 50, 38, 0.25);

  /* accent */
  --red: #e2574c;

  /* note colours */
  --note-yellow: #fff3b0;
  --note-pink: #ffd6e0;
  --note-blue: #cfe8ff;
  --note-green: #d8f3d0;
  --note-lilac: #e7ddff;

  /* type */
  --font-body: "Nunito", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", ui-rounded, cursive;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 30px;

  /* shape */
  --radius-sm: 5px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --border: 2px solid var(--ink);

  /* depth */
  --shadow-card: 0 7px 16px rgba(58, 50, 38, 0.16);
  --shadow-hard: 3px 3px 0 rgba(58, 50, 38, 0.2);
  --shadow-hard-ink: 4px 4px 0 var(--ink);

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 26px;
}