/* ============================================================
   ahaaa.in — tokens.css
   ------------------------------------------------------------
   🎨 THE PAINT CATALOGUE
   Every colour, font and shared value on the whole website
   lives in this one file. Change a value here and it updates
   EVERYWHERE automatically.

   ✏️ SAFE TO EDIT: the values (the part after the colon).
   ⚠️ DO NOT rename the variables (the part starting with --),
      other files depend on those exact names.

   NOTE: js/data.js keeps a copy of the six candy colours for
   the confetti effect. If you change a candy colour here,
   change it there too so confetti matches.
   ============================================================ */

:root{

  /* ---------- base colours ---------- */
  --paper:#FFFDF9;          /* page background — warm white          */
  --ink:#14162B;            /* main text — near-black indigo         */
  --muted:#6B6E85;          /* secondary text — soft grey            */
  --line:#ECEAE3;           /* borders and dividers                  */

  /* ---------- the six candy colours ---------- */
  --blue:#2E5BFF;           /* primary brand colour — electric blue  */
  --pink:#FF4D8D;
  --orange:#FF8A1E;
  --green:#00BD8E;
  --purple:#8B5CF6;
  --yellow:#FFB800;

  /* ---------- corner roundness ---------- */
  --r-lg:28px;              /* big cards                             */
  --r-md:20px;              /* medium boxes                          */
  --r-full:999px;           /* fully round pills & buttons           */

  /* ---------- fonts ---------- */
  /* Loaded from Google Fonts in index.html.
     Baloo 2  = the rounded display font (headings, buttons)
     DM Sans  = the body font (paragraphs)
     DM Mono  = the "computer" font (URLs, prompts, dates)   */
  --disp:'Baloo 2', system-ui, sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  --mono:'DM Mono', ui-monospace, monospace;

  /* ---------- shadows ---------- */
  /* kept deliberately subtle — premium reads as "barely there" */
  --shadow-soft:0 1px 2px rgba(20,22,43,.03), 0 8px 24px rgba(20,22,43,.04);
  --shadow-lift:0 2px 6px rgba(20,22,43,.05), 0 18px 44px rgba(20,22,43,.08);
}