/* ==========================================================================
   tokens.css — the whole design system in one place.
   Change a value here and it changes everywhere on the site.
   ========================================================================== */

:root {
  /* --- The night table (page ground) ------------------------------------ */
  --night:        #241C56;   /* main background */
  --night-deep:   #17114012; /* unused alpha guard */
  --night-dark:   #191243;   /* footer, deeper pockets */
  --night-soft:   #322A6E;   /* raised night surfaces */
  --night-line:   #4A3F92;   /* hairlines on dark */

  /* --- Construction paper ----------------------------------------------- */
  --paper:        #FFF7EC;   /* the cream sheet everything is printed on */
  --paper-warm:   #FBE8D0;   /* second sheet, warmer */
  --paper-edge:   #E7D3B8;   /* torn / cut edge */

  /* --- Ink --------------------------------------------------------------- */
  --ink:          #2B2158;   /* text on paper */
  --ink-soft:     #6A5FA6;   /* secondary text on paper */
  --cream:        #FFF7EC;   /* text on night */
  --cream-soft:   #BEB3E8;   /* secondary text on night */

  /* --- The palette (card stock) ------------------------------------------ */
  --moon:         #FFD16B;   /* primary accent — the moon is the light source */
  --moon-deep:    #F0A233;
  --bubble:       #FF8FB8;
  --mint:         #7CE0C0;
  --peri:         #A9B6FF;
  --grape:        #C99BFF;

  /* --- Pens (legible on every paper colour) ------------------------------- */
  --pen-ink:   #2B2158;
  --pen-red:   #D14038;
  --pen-green: #1F7F5E;
  --pen-blue:  #3450C8;
  --pen-pink:  #C93A80;

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-hand:    "Shantell Sans", "Bradley Hand", "Comic Sans MS", cursive;
  --font-body:    "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.50rem);
  --step-2:  clamp(1.50rem, 1.32rem + 0.90vw, 2.10rem);
  --step-3:  clamp(2.00rem, 1.62rem + 1.90vw, 3.10rem);
  --step-4:  clamp(2.60rem, 1.75rem + 4.20vw, 5.00rem);

  /* --- Space & shape ------------------------------------------------------ */
  /* Jojo's cards photograph at roughly 5:8; every card on the page matches. */
  --card-ratio: 5 / 8;

  --wrap:    1120px;
  --gutter:  clamp(1.15rem, 4vw, 2.5rem);
  --section: clamp(2.35rem, 4.2vw, 4rem);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-paper: 0 2px 0 rgba(43, 33, 88, 0.10), 0 22px 40px -20px rgba(12, 6, 45, 0.75);
  --shadow-lift:  0 4px 0 rgba(43, 33, 88, 0.10), 0 40px 70px -28px rgba(12, 6, 45, 0.85);
  --shadow-sticker: 0 6px 14px -6px rgba(12, 6, 45, 0.55);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Paper grain, used as an overlay on cream panels */
  --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.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}