/* ============================================================
   panama-ensemble.de — Design Tokens
   Aesthetic: 1960s European children's book × risograph print.
   Imagine the front cover of a Janosch picture book turned into
   a concert program. Off-register inks, warm paper, hand-set type.
   ============================================================ */

:root {
  /* -- inks (named after risograph stock colours) ---------- */
  --pe-mint:      #8ED3C7;   /* sea-green / cooled water */
  --pe-mint-dark: #4FA597;
  --pe-mint-tint: #C4E5DD;

  --pe-pink:      #F4A8B8;   /* dustpan rose */
  --pe-pink-dark: #D8728A;
  --pe-pink-tint: #FBD3DC;

  --pe-mustard:      #E8B546;   /* old-paper yellow */
  --pe-mustard-dark: #BF8B12;
  --pe-mustard-tint: #F4D38C;

  --pe-orange:       #F59B34;   /* original brand orange (Mystery-Quest-Logo) */
  --pe-orange-dark:  #D17A14;

  --pe-ink:       #2A2438;   /* deep violet — kinder than #000 */
  --pe-ink-soft:  #4A4358;
  --pe-paper:     #FFF7EC;   /* warm off-white */
  --pe-paper-dim: #F2E6CC;

  /* -- semantic ------------------------------------------- */
  --bg:           var(--pe-paper);
  --bg-dim:       var(--pe-paper-dim);
  --fg:           var(--pe-ink);
  --fg-soft:      var(--pe-ink-soft);
  --accent:       var(--pe-mustard);
  --accent-dark:  var(--pe-mustard-dark);
  --rule:         color-mix(in srgb, var(--pe-ink) 18%, transparent);

  /* -- typography ----------------------------------------- */
  --ff-display:  "Fraunces", Georgia, serif;            /* SOFT axis */
  --ff-body:     "Quicksand", system-ui, sans-serif;
  --ff-brand:    "Mystery Quest", "Fraunces", serif;    /* original wordmark */
  --ff-mono:     "JetBrains Mono", ui-monospace, monospace;

  /* fluid sizes — clamp(min, fluid, max) */
  --fs-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --fs-sm:   clamp(0.92rem, 0.88rem + 0.2vw, 1.00rem);
  --fs-md:   clamp(1.05rem, 1.00rem + 0.3vw, 1.18rem);
  --fs-lg:   clamp(1.30rem, 1.18rem + 0.6vw, 1.55rem);
  --fs-xl:   clamp(1.85rem, 1.55rem + 1.4vw, 2.60rem);
  --fs-2xl:  clamp(2.50rem, 2.00rem + 2.2vw, 3.80rem);
  --fs-3xl:  clamp(3.40rem, 2.50rem + 4.0vw, 6.00rem);
  --fs-4xl:  clamp(4.50rem, 3.00rem + 6.5vw, 9.00rem);

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.55;

  --tr-tight: -0.02em;
  --tr-body:  0;
  --tr-loose: 0.06em;

  /* -- spacing (logical 8-pt grid, plus poetic outliers) -- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6rem;
  --sp-8: 9rem;

  /* -- radius -------------------------------------------- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   28px;
  --r-pill: 999px;

  /* -- elevation (paper + ink) --------------------------- */
  --shadow-paper: 0 1px 0 rgba(42,36,56,.06), 0 8px 22px -12px rgba(42,36,56,.18);
  --shadow-card:  0 2px 0 var(--pe-ink), 0 14px 28px -18px rgba(42,36,56,.35);
  --shadow-deep:  0 6px 0 var(--pe-ink), 0 30px 50px -22px rgba(42,36,56,.45);

  /* -- motion -------------------------------------------- */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-soft:   cubic-bezier(.4,.0,.2,1);
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-slow:   620ms;

  /* -- container widths ---------------------------------- */
  --w-prose:  60ch;
  --w-narrow: 720px;
  --w-mid:    1040px;
  --w-wide:   1240px;

  /* -- layered backgrounds (riso registration mark) ------ */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.165 0 0 0 0 0.141 0 0 0 0 0.220 0 0 0 0.07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}