/* ==========================================================================
   Paidia · Riso Zine Funky — Design Tokens
   --------------------------------------------------------------------------
   Extracted from rhiso_zine_deck_two.html (the "funky" slanted deck David
   landed on after iterating in Claude Design, May 2026). This is a RISOGRAPH
   ZINE system: deep purple paper, two fluoro spot inks (yellow + pink),
   Archivo Black at poster scale, JetBrains Mono carrying all the chrome, and
   a deliberate hand-printed wobble — small rotations, offset block-shadows,
   and a halftone dot wash — that keep it from ever looking machine-clean.

   Class prefix: .rz-*    Canvas: 1920 × 1080 for decks.

   Two scales live here:
     • DECK tokens (--rz-d-*) are ABSOLUTE px for the fixed 1920×1080 stage.
     • WEB tokens (rem) are fluid, for sites/apps built in the same voice.
   ========================================================================== */

:root {
  /* ---- Type families --------------------------------------------------- */
  --rz-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --rz-sans:    "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rz-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Palette — the riso ink set -------------------------------------- */
  /* The press only runs four inks: two purples (paper), two fluoro spots.   */
  --rz-purple:        #2b1f4f;   /* deep purple — the default "paper" plate  */
  --rz-purple-deep:   #1a1438;   /* deeper purple — alternating slides       */
  --rz-paper:         #fbf3d8;   /* warm off-white — all type on purple      */
  --rz-yellow:        #fff200;   /* fluoro yellow — spot ink #1 (primary)    */
  --rz-pink:          #ff5fa2;   /* riso pink — spot ink #2 (secondary)      */

  /* Ink-on-spot — text colour to drop ONTO a yellow/pink/paper plate.
     Always the deep purple, never black: keeps the four-ink discipline.    */
  --rz-ink:           var(--rz-purple-deep);

  /* Plum — the one "third" colour, used only for the "you:" voice in chat
     mock-ups and as a deep accent on paper. Use sparingly.                 */
  --rz-plum:          #7a1f5a;

  /* Rules / hairlines — paper at low alpha, for dividers on purple.        */
  --rz-rule:          rgba(251, 243, 216, 0.16);
  --rz-rule-strong:   rgba(251, 243, 216, 0.32);
  --rz-rule-on-light: rgba(26, 20, 56, 0.18);   /* divider on a paper plate */

  /* Paper at alpha — muted type on purple (footers, captions, deks).       */
  --rz-paper-70:      rgba(251, 243, 216, 0.70);
  --rz-paper-85:      rgba(251, 243, 216, 0.85);
  --rz-paper-50:      rgba(251, 243, 216, 0.50);

  /* ---- DECK type scale (absolute px for the 1920×1080 stage) ----------- */
  /* Display = Archivo Black, set tight and overlapping (line-height < 1).  */
  --rz-d-display-1: 200px;   /* title / section hero                        */
  --rz-d-display-2: 170px;   /* concept heroes                             */
  --rz-d-display-3: 130px;   /* smaller hero                              */
  --rz-d-display-lh: 0.84;
  --rz-d-display-track: -0.045em;

  --rz-d-heading-1: 96px;    /* slide H2                                   */
  --rz-d-heading-2: 80px;
  --rz-d-heading-3: 64px;
  --rz-d-heading-4: 48px;
  --rz-d-heading-lh: 0.92;
  --rz-d-heading-track: -0.03em;

  --rz-d-lead:      32px;    /* deck — sub-headline paragraph              */
  --rz-d-lead-lh:   1.32;
  --rz-d-body:      26px;    /* deck — body copy                          */
  --rz-d-body-lh:   1.5;
  --rz-d-body-sm:   24px;
  --rz-d-list:      30px;    /* build-list default                        */
  --rz-d-list-lg:   36px;
  --rz-d-list-sm:   26px;
  --rz-d-tile-num:  140px;   /* num-marker / category big numeral         */
  --rz-d-tile-h:    80px;    /* tile heading                              */

  /* Deck mono chrome (footers, eyebrows, captions, chips). */
  --rz-d-mono-foot:    24px;  --rz-d-mono-foot-track:    0.14em;
  --rz-d-mono-eyebrow: 22px;  --rz-d-mono-eyebrow-track: 0.18em;
  --rz-d-mono-chip:    18px;  --rz-d-mono-chip-track:    0.12em;
  --rz-d-mono-lbl:     16px;  --rz-d-mono-lbl-track:     0.14em;

  /* Deck slide geometry. */
  --rz-d-stage-w:   1920px;
  --rz-d-stage-h:   1080px;
  --rz-d-slide-pad: 88px 104px 64px;   /* top, sides, bottom */

  /* ---- WEB type scale (fluid rem) ------------------------------------- */
  /* Same proportions, dialled to screen sizes. Display still set tight.    */
  --rz-fs-display: clamp(3.5rem, 9vw, 7.5rem);   --rz-lh-display: 0.86;
  --rz-fs-h1:      clamp(2.75rem, 6vw, 5rem);     --rz-lh-h1: 0.94;
  --rz-fs-h2:      clamp(2.25rem, 4.5vw, 3.5rem); --rz-lh-h2: 0.98;
  --rz-fs-h3:      clamp(1.75rem, 3vw, 2.5rem);   --rz-lh-h3: 1.05;
  --rz-fs-h4:      1.5rem;                          --rz-lh-h4: 1.15;
  --rz-fs-lead:    clamp(1.25rem, 2vw, 1.625rem);  --rz-lh-lead: 1.35;
  --rz-fs-body:    1.125rem;                        --rz-lh-body: 1.55;
  --rz-fs-sm:      1rem;                            --rz-lh-sm: 1.5;
  --rz-fs-mono:    0.875rem;                        --rz-track-mono: 0.14em;
  --rz-fs-eyebrow: 0.8125rem;                       --rz-track-eyebrow: 0.18em;

  /* Display/heading tracking (web). Archivo (Black) is set tight. */
  --rz-track-display: -0.04em;
  --rz-track-heading: -0.03em;
  --rz-track-tight:   -0.02em;

  /* ---- Weights -------------------------------------------------------- */
  --rz-w-reg:   400;
  --rz-w-med:   500;
  --rz-w-semi:  600;
  --rz-w-bold:  700;
  --rz-w-black: 900;   /* Archivo (variable) pushed to its top end          */

  /* ---- Spacing (8-px base, with 4-px half-steps) ---------------------- */
  --rz-sp-1:  0.25rem;
  --rz-sp-2:  0.5rem;
  --rz-sp-3:  0.75rem;
  --rz-sp-4:  1rem;
  --rz-sp-6:  1.5rem;
  --rz-sp-8:  2rem;
  --rz-sp-10: 2.5rem;
  --rz-sp-12: 3rem;
  --rz-sp-16: 4rem;
  --rz-sp-20: 5rem;
  --rz-sp-24: 6rem;

  /* ---- Layout (web) --------------------------------------------------- */
  --rz-container-max:  1280px;
  --rz-container-pad:  clamp(1.25rem, 5vw, 6.5rem);
  --rz-grid-columns:   12;
  --rz-grid-gutter:    clamp(1.5rem, 3vw, 3.5rem);
  --rz-prose-max:      62ch;

  /* ---- Radius --------------------------------------------------------- */
  /* The funk is mostly square-with-soft-corners: a chunky 8px on plates,
     full pill on chips. (The "straight" sibling deck zeroes these — see
     README.) */
  --rz-radius-0:    0;
  --rz-radius-sm:   4px;
  --rz-radius:      8px;     /* tiles, figures, code blocks                 */
  --rz-radius-pill: 999px;   /* chips, the live-dot                         */

  /* ---- Rotation — THE FUNK -------------------------------------------- */
  /* The hand-printed wobble. Every plate sits a degree or two off-true.
     These are the exact angles used across the deck; reach for them rather
     than inventing new ones, so the wobble stays coherent.                 */
  --rz-rot-xs:   -0.6deg;
  --rz-rot-sm:   -1.2deg;
  --rz-rot-sm-cw: 1.4deg;
  --rz-rot-md:   -1.5deg;
  --rz-rot-lg:   -2deg;
  --rz-rot-xl:   -3deg;     /* num-marker                                  */
  --rz-rot-chip:    -1deg;  /* chips (slightly less than tiles)            */
  --rz-rot-chip-cw:  1deg;
  --rz-rot-fig-alt:  0.6deg;/* the alternate (clockwise) figure tilt       */
  --rz-rot-hover:   -0.5deg;/* playful tilt on card hover (web)            */
  --rz-skew:     -8deg;     /* scribble underline / sports-diagonal feel   */

  /* ---- Riso offset shadow (NOT a drop shadow) ------------------------- */
  /* A hard, un-blurred colour block sitting behind a plate — the signature
     mis-registration look. Always a flat spot ink, never rgba/blur.        */
  --rz-offset-pink:   8px 8px 0 0 var(--rz-pink);
  --rz-offset-yellow: -8px 8px 0 0 var(--rz-yellow);
  --rz-offset-sm-pink:   6px 6px 0 0 var(--rz-pink);
  --rz-offset-sm-yellow: 6px 6px 0 0 var(--rz-yellow);

  /* ---- Halftone wash -------------------------------------------------- */
  /* A dot screen laid over a slide at low opacity. Yellow or pink dots.    */
  --rz-halftone-size:    18px 18px;
  --rz-halftone-yellow:  radial-gradient(rgba(255, 242, 0, 0.40) 1.4px, transparent 1.4px);
  --rz-halftone-pink:    radial-gradient(rgba(255, 95, 162, 0.45) 1.4px, transparent 1.4px);
  --rz-halftone-opacity: 0.18;
  --rz-halftone-opacity-subtle: 0.08;

  /* ---- Motion --------------------------------------------------------- */
  --rz-dur-fast: 0.14s;
  --rz-dur-base: 0.28s;
  --rz-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --rz-dur-fast: 0s; --rz-dur-base: 0s; }
}

/* ==========================================================================
   THE STRAIGHT CUT — one switch, not a recipe
   --------------------------------------------------------------------------
   For rooms that "aren't ready for funk". Put `class="rz-cut--straight"` on
   the <body> (web) or on <body>/<html> (a deck — custom properties inherit
   down through the deck-stage slot to every slide). It zeroes EVERY funk
   token — all rotations, the skew, all radii, both halftone opacities, and
   the offset block-shadows — so the wobble, the round corners, the dot wash
   and the mis-registration shadow all come off in one move, leaving the
   palette and type untouched.

   NOTE: the original reference straight deck went one step further and
   swapped the offset block-shadow for a flat coloured left-rule on figures.
   This switch only NEUTRALISES the funk (shadow → none); it does not add the
   left-rule. For a pixel-match to reference/original_deck_straight.html, add
   a `border-left: 6px solid var(--rz-pink)` to .rz-figure yourself. For most
   purposes this switch is the straight cut.                                  */
.rz-cut--straight {
  --rz-rot-xs: 0deg;  --rz-rot-sm: 0deg;  --rz-rot-sm-cw: 0deg;
  --rz-rot-md: 0deg;  --rz-rot-lg: 0deg;  --rz-rot-xl: 0deg;
  --rz-rot-chip: 0deg; --rz-rot-chip-cw: 0deg; --rz-rot-fig-alt: 0deg;
  --rz-rot-hover: 0deg; --rz-skew: 0deg;
  --rz-radius-sm: 0; --rz-radius: 0; --rz-radius-pill: 0;
  --rz-halftone-opacity: 0; --rz-halftone-opacity-subtle: 0;
  --rz-offset-pink: none;   --rz-offset-yellow: none;
  --rz-offset-sm-pink: none; --rz-offset-sm-yellow: none;
}