/* ============================================================
   JuNu — Design Tokens
   A bold, playful personal-portfolio system inspired by
   Raw Materials. Cream paper, near-black ink, loud accent
   blocks, IBM Plex Sans + Mono.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Surfaces ---------- */
  --ink:        #0E0E0D;   /* primary text / lines / dark blocks */
  --ink-80:     rgba(14,14,13,0.80);
  --ink-55:     rgba(14,14,13,0.55);
  --ink-30:     rgba(14,14,13,0.30);
  --ink-14:     rgba(14,14,13,0.14);
  --paper:      #F1ECE3;   /* base canvas (warm cream) */
  --paper-2:    #E8E1D4;   /* recessed card surface */
  --white:      #FFFFFF;

  /* ---------- Accents (the loud cards) ---------- */
  --red:        #FF2E20;
  --blue:       #2E45FF;
  --violet:     #6A22FF;
  --yellow:     #FFD400;
  --lime:       #C8FF00;

  /* foreground to use ON each accent */
  --on-red:     #FFFFFF;
  --on-blue:    #FFFFFF;
  --on-violet:  #FFFFFF;
  --on-yellow:  #0E0E0D;
  --on-lime:    #0E0E0D;

  /* ---------- Type families ---------- */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Sans", system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  --fs-hero:   clamp(96px, 16vw, 240px);  /* giant section word  */
  --fs-d1:     clamp(56px, 7vw, 96px);    /* statement display   */
  --fs-h1:     48px;
  --fs-h2:     32px;
  --fs-h3:     22px;
  --fs-body:   17px;
  --fs-small:  14px;
  --fs-label:  12px;                       /* mono micro-label    */

  --lh-tight:  0.86;   /* single-word giant heroes */
  --lh-display: 0.98;  /* multi-line big display (statements, contact) */
  --lh-snug:   1.05;
  --lh-body:   1.55;

  --tr-display: -0.03em;  /* tight tracking on big display */
  --tr-tight:   -0.01em;
  --tr-label:    0.08em;  /* loose tracking on mono labels */

  /* ---------- Spacing (4-based) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- Radii ---------- */
  --r-card: 20px;
  --r-sm:   10px;
  --r-pill: 999px;

  /* ---------- Borders & lines ---------- */
  --bw:      2px;             /* structural border weight */
  --line:    var(--ink);
  --hair:    var(--ink-30);  /* hairline dividers */

  /* ---------- Elevation (flat + one hard shadow) ---------- */
  --shadow-hard: 4px 4px 0 var(--ink);

  /* ---------- Motion ---------- */
  --ease-accordion: cubic-bezier(.62, 0, .2, 1);
  --dur-accordion:  480ms;
  --dur-state:      280ms;
  --dur-hover:      160ms;
  --ease-out:       cubic-bezier(.2, .6, .2, 1);
}