/* ============================================================================
   tokens.css: design tokens (CSS custom properties)
   ----------------------------------------------------------------------------
   The single source of truth for the palette, the four-role type system, and the
   two repeating SVG textures. Every other stylesheet references these via var();
   change a value here and it updates everywhere. Loaded first so the variables
   exist before any rule that uses them.
   ========================================================================== */

:root{
  /* ---- Palette --------------------------------------------------------------
     Warm paper-and-ink scrapbook colours. --paper/--paper2 are page stock,
     --desk is the darker background board, --ink is the main text colour, and
     the named hues (terra, berry, clay, …) are the accent inks used for buttons,
     tape, and section highlights. The pastel s* set tints sticky notes. */
  --paper:#fdf6e8; --paper2:#f6ecd8; --desk:#e5d5b7; --ink:#33261a; --faded:#8a7360;
  --line:#d9c4a6; --terra:#c4622d; --berry:#b85060; --clay:#d4845a; --moss:#7c8f5f;
  --denim:#5b7d99; --butter:#f9dd76; --spink:#f6c3bb; --smint:#cfe2c0; --ssky:#c6dbe8;
  --cork:#c79a68; --redpen:#c03d2e; --shadow:rgba(80,55,30,.16);

  /* ---- Type system: four roles, one place --------------------------------
     --head is the printed/editorial voice, --hand is handwriting (notes,
     buttons, captions), --body is clean UI text, --mono is the small typewriter
     used only for stamps and labels. */
  --f-head:'Fraunces',Georgia,serif;
  --f-hand:'Shantell Sans','Segoe Print',cursive;
  --f-body:'Nunito',system-ui,-apple-system,sans-serif;
  --f-mono:'Special Elite','Courier New',monospace;

  /* ---- Textures (inline SVG data URIs) -----------------------------------
     --grain is a faint monochrome noise layered under paper surfaces for tooth.
     --squiggle is the hand-drawn underline drawn beneath .squig headings. Kept
     inline so they need no network request and work offline. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='7' viewBox='0 0 84 7'%3E%3Cpath d='M1 4.5 C 8 1.5, 13 6.5, 21 4 S 34 1.5, 42 4 S 55 6.5, 63 4 S 76 1.5, 83 4.5' fill='none' stroke='%23c4622d' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}