/* ==========================================================================
   Design tokens — the only file with raw colour, radius and shadow values.
   Change a token here and it changes everywhere.
   ========================================================================== */

:root {
  /* --- Surfaces & ink --------------------------------------------------- */
  --paper: #fdfbf7;
  --card: #ffffff;
  --ink: #2d2d2d;
  --muted: #e5e0d8;
  --muted-fg: #6c665c;
  --grain: #e5e0d8;
  --shadow: #2d2d2d;

  /* --- Accents ---------------------------------------------------------- */
  --accent: #ff4d4d;
  --accent-strong: #d63030;
  --blue: #2d5da1;

  /* --- Post-it notes ---------------------------------------------------- */
  --postit: #fff9c4;
  --postit-fg: #8a8368;

  /* --- Masking tape ----------------------------------------------------- */
  --tape: rgba(45, 45, 45, 0.12);
  --tape-edge: rgba(45, 45, 45, 0.28);

  /* --- Empty image placeholders ----------------------------------------- */
  --ph: #a49e93;
  --ph-x: #ddd8ce;

  /* --- Wobbly, hand-drawn corner radii ---------------------------------- */
  --wob: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobmd: 20px 6px 18px 8px / 8px 18px 6px 20px;
  --wobsm: 14px 5px 12px 6px / 6px 12px 5px 14px;
  --wobxs: 9px 3px 10px 4px / 4px 10px 3px 9px;
  --wob-hero: 18px 6px 16px 8px / 8px 16px 6px 18px;
  --wob-blob-a: 60% 40% 55% 45% / 45% 55% 40% 60%;
  --wob-blob-b: 45% 55% 40% 60% / 60% 40% 55% 45%;
  --wob-blob-c: 58% 42% 50% 50% / 50% 55% 45% 50%;
  --wob-blob-d: 50% 50% 42% 58% / 55% 45% 55% 45%;

  /* --- Hard offset shadows (never blurred) ------------------------------ */
  --sh-sm: 3px 3px 0 0 var(--shadow);
  --sh: 4px 4px 0 0 var(--shadow);
  --sh-md: 6px 6px 0 0 var(--shadow);
  --sh-lg: 7px 7px 0 0 var(--shadow);
  --sh-xl: 8px 8px 0 0 var(--shadow);

  /* --- Type ------------------------------------------------------------- */
  --font-hand: "Patrick Hand", ui-rounded, system-ui, sans-serif;
  --font-marker: "Kalam", cursive;

  /* --- Global wobble dial ----------------------------------------------- */
  /* 0 = perfectly straight, 1 = default, 2 = chaotic */
  --tilt: 1;
}

/* Chalkboard mode — follows the OS unless the visitor picks a side. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #23262a;
    --card: #2b2f34;
    --ink: #f2efe6;
    --muted: #3a3f45;
    --muted-fg: #a9a49a;
    --grain: #31353a;
    --shadow: #131619;
    --accent: #ff6b6b;
    --accent-strong: #ff8a8a;
    --blue: #8fb4f0;
    --postit: #4c452b;
    --postit-fg: #cfc79f;
    --tape: rgba(242, 239, 230, 0.1);
    --tape-edge: rgba(242, 239, 230, 0.24);
    --ph: #6b7178;
    --ph-x: #3a3f45;
  }
}

:root[data-theme="dark"] {
  --paper: #23262a;
  --card: #2b2f34;
  --ink: #f2efe6;
  --muted: #3a3f45;
  --muted-fg: #a9a49a;
  --grain: #31353a;
  --shadow: #131619;
  --accent: #ff6b6b;
  --accent-strong: #ff8a8a;
  --blue: #8fb4f0;
  --postit: #4c452b;
  --postit-fg: #cfc79f;
  --tape: rgba(242, 239, 230, 0.1);
  --tape-edge: rgba(242, 239, 230, 0.24);
  --ph: #6b7178;
  --ph-x: #3a3f45;
}