/* ============================================================
   IDEAS BY LEO — Design Tokens
   The house is monochrome. Colour lives only inside the
   studio worlds (.world--talisman / --2204 / --pop), which
   remap the active palette, then the page returns to white.
   ============================================================ */

:root {
  /* ---------- HOUSE INK RAMP (no hue) ---------- */
  --paper:    #ffffff;
  --ink-025:  #fafafa;
  --ink-050:  #f5f5f5;
  --ink-100:  #ececec;
  --ink-150:  #dedede;
  --ink-200:  #cccccc;
  --ink-300:  #a6a6a6;
  --ink-400:  #808080;
  --ink-500:  #5c5c5c;
  --ink-600:  #3d3d3d;
  --ink-700:  #292929;
  --ink-800:  #171717;
  --ink-900:  #0a0a0a;
  --ink:      #000000;

  /* ---------- ACTIVE SEMANTIC PALETTE ----------
     These are what components read. A .world--* scope
     overwrites them. Default = the monochrome house. */
  --bg:           var(--paper);
  --bg-raise:     var(--ink-025);
  --fg:           var(--ink);
  --fg-body:      var(--ink-800);
  --fg-muted:     #4a4a4a;   /* AA on white (>7:1) */
  --fg-faint:     var(--ink-500);
  --line:         var(--ink-100);
  --line-strong:  var(--ink);
  --accent:       var(--ink);        /* the "spark" a world can tint */
  --accent-2:     var(--ink-700);
  --on-accent:    var(--paper);
  --select-bg:    var(--ink);
  --select-fg:    var(--paper);
  --shadow-block: 10px 10px 0 var(--ink);   /* the printed-block cast */

  /* ---------- FIXED-CHROME COLOUR ----------
     Nav / cursor / spine / progress live outside section flow.
     JS repaints these per active chapter (data-chrome/data-accent).
     Default = the monochrome house: black ink on white. */
  --chrome-fg:     #000000;
  --chrome-accent: #000000;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Staatliches", "Arial Narrow", sans-serif;   /* house display */
  --font-script:  "Yellowtail", "Brush Script MT", cursive;    /* the hand */
  --font-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* studio faces (used only inside worlds) */
  --font-tal-display: "Posterama 2001", system-ui, sans-serif;
  --font-tal-body:    "Hoss Round", system-ui, sans-serif;
  --font-tal-wild:    "Cheee Conshred", "Posterama 2001", sans-serif;
  --font-lab-display: "Abril Fatface", "Ohno Fatface", Georgia, serif;
  --font-lab-sub:     "Posterama 2001", "Michroma", sans-serif;
  --font-lab-body:    "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-pop-display: "Les Flos Chaos", "Arial Black", sans-serif;
  --font-pop-sec:     "The Foregen", Georgia, serif;
  --font-pop-body:    "Unbounded", "Helvetica Neue", Arial, sans-serif;

  /* ---------- FLUID TYPE SCALE ---------- */
  --fs-hero:    clamp(4rem, 15vw, 17rem);   /* the monoliths */
  --fs-mega:    clamp(3.2rem, 11vw, 12rem);
  --fs-d1:      clamp(3rem, 8vw, 8rem);
  --fs-d2:      clamp(2.4rem, 5.5vw, 5rem);
  --fs-d3:      clamp(1.9rem, 4vw, 3.4rem);
  --fs-h1:      clamp(1.8rem, 3vw, 2.8rem);
  --fs-h2:      clamp(1.5rem, 2.3vw, 2.1rem);
  --fs-lead:    clamp(1.15rem, 1.6vw, 1.55rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.15rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-2xs:     0.6875rem;

  --lh-tight:   0.92;
  --lh-snug:    1.06;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  --track-display: 0.01em;
  --track-eyebrow: 0.28em;
  --track-tight:   -0.015em;

  --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-extra: 800;

  /* ---------- SPACE ---------- */
  --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; --s-10: 128px;
  --s-11: 192px; --s-12: 256px;
  --gutter:  clamp(20px, 5vw, 84px);
  --section-y: clamp(96px, 15vh, 220px);
  --maxw: 1440px;
  --measure: 66ch;

  /* ---------- RADIUS (the block wants square) ---------- */
  --r-0: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --b-hair: 1px; --b-bold: 2px; --b-heavy: 3px;

  /* ---------- GLASS ---------- */
  --glass-blur: 18px;
  --glass-blur-strong: 32px;
  --glass-fill: rgba(255,255,255,0.60);
  --glass-fill-soft: rgba(255,255,255,0.40);
  --glass-stroke: rgba(255,255,255,0.55);
  --glass-shadow: 0 20px 50px rgba(0,0,0,0.14);

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-3: 0 12px 34px rgba(0,0,0,0.12);
  --shadow-4: 0 28px 70px rgba(0,0,0,0.18);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-domino:   cubic-bezier(0.34, 1.3, 0.5, 1);   /* the tip */
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-topple: 640ms;

  /* ---------- Z ---------- */
  --z-spine: 2;
  --z-content: 5;
  --z-nav: 100;
  --z-cursor: 9999;
  --z-overlay: 1000;
  --z-loader: 12000;

  /* ---------- BRAND SWATCHES (referenced by worlds) ---------- */
  --tal-purple:   #460064;
  --tal-purple-d: #2D003F;
  --tal-purple-x: #1A0026;
  --tal-yellow:   #FFC700;
  --tal-yellow-d: #E5AE00;
  --tal-bone:     #FAFAF7;

  --lab-orange:   #FF6B00;
  --lab-ember:    #EA5302;
  --lab-crimson:  #B62C00;
  --lab-oxblood:  #6F0D00;
  --lab-oxdeep:   #410001;
  --lab-red:      #9C0404;
  --lab-cream:    #F2E3D0;
  --lab-gradient: linear-gradient(168deg,#FF6B00 0%,#EA5302 28%,#B62C00 52%,#6F0D00 78%,#410001 100%);

  --pop-black: #000000;
  --pop-white: #FFFFFF;
}

/* ============================================================
   STUDIO WORLDS — scoped palette remaps.
   Put the class on a <section> (or the wrapper) to enter a world.
   ============================================================ */

/* --- TALISMAN: purple monolith, yellow spark --- */
.world--talisman {
  --bg: var(--tal-bone);
  --bg-raise: #ffffff;
  --fg: var(--tal-purple);
  --fg-body: var(--tal-purple-x);
  --fg-muted: #6B6660;
  --fg-faint: #B8B3A8;
  --line: rgba(70,0,100,0.16);
  --line-strong: var(--tal-purple);
  --accent: var(--tal-yellow);
  --accent-2: var(--tal-purple);
  --on-accent: var(--tal-purple-x);
  --select-bg: var(--tal-yellow);
  --select-fg: var(--tal-purple-x);
  --shadow-block: 10px 10px 0 var(--tal-purple);
}
/* Talisman can also go full dark-purple monolith */
.world--talisman.is-ink {
  --bg: var(--tal-purple-x);
  --bg-raise: var(--tal-purple-d);
  --fg: var(--tal-yellow);
  --fg-body: #E4D2EE;
  --fg-muted: #B79FCD;
  --line: rgba(255,255,255,0.14);
  --line-strong: var(--tal-yellow);
  --accent: var(--tal-yellow);
  --on-accent: var(--tal-purple-x);
  --shadow-block: 10px 10px 0 var(--tal-yellow);
}

/* --- 2204: ember heat --- */
.world--2204 {
  --bg: #ffffff;
  --bg-raise: #FBF8F6;
  --fg: var(--lab-red);
  --fg-body: #2E2826;
  --fg-muted: #6F635D;
  --fg-faint: #C7BBB3;
  --line: rgba(156,4,4,0.16);
  --line-strong: var(--lab-red);
  --accent: var(--lab-orange);
  --accent-2: var(--lab-red);
  --on-accent: #ffffff;
  --select-bg: var(--lab-orange);
  --select-fg: #ffffff;
  --shadow-block: 10px 10px 0 var(--lab-red);
}
/* 2204 full-heat: the gradient canvas */
.world--2204.is-hot {
  --bg: var(--lab-oxdeep);
  --bg-raise: rgba(255,255,255,0.06);
  --fg: var(--lab-cream);
  --fg-body: var(--lab-cream);
  --fg-muted: rgba(242,227,208,0.66);
  --fg-faint: rgba(242,227,208,0.4);
  --line: rgba(242,227,208,0.22);
  --line-strong: var(--lab-cream);
  --accent: var(--lab-orange);
  --on-accent: var(--lab-oxdeep);
  --shadow-block: 10px 10px 0 var(--lab-orange);
}

/* --- POP: strict black & white, invert energy --- */
.world--pop {
  --bg: #ffffff;
  --bg-raise: #ffffff;
  --fg: #000000;
  --fg-body: #000000;
  --fg-muted: #000000;
  --fg-faint: #000000;
  --line: #000000;
  --line-strong: #000000;
  --accent: #000000;
  --accent-2: #000000;
  --on-accent: #ffffff;
  --select-bg: #000000;
  --select-fg: #ffffff;
  --shadow-block: 10px 10px 0 #000000;
}
/* POP flipped to the black canvas */
.world--pop.is-ink {
  --bg: #000000;
  --bg-raise: #000000;
  --fg: #ffffff;
  --fg-body: #ffffff;
  --fg-muted: #ffffff;
  --fg-faint: #ffffff;
  --line: #ffffff;
  --line-strong: #ffffff;
  --accent: #ffffff;
  --on-accent: #000000;
  --select-bg: #ffffff;
  --select-fg: #000000;
  --shadow-block: 10px 10px 0 #ffffff;
}

/* House ink scope (rare dark moment kept monochrome) */
[data-theme="ink"] {
  --bg: var(--ink);
  --bg-raise: var(--ink-900);
  --fg: var(--paper);
  --fg-body: var(--ink-100);
  --fg-muted: var(--ink-300);
  --fg-faint: var(--ink-500);
  --line: rgba(255,255,255,0.12);
  --line-strong: var(--paper);
  --accent: var(--paper);
  --on-accent: var(--ink);
  --select-bg: var(--paper);
  --select-fg: var(--ink);
  --shadow-block: 10px 10px 0 var(--paper);
  --glass-fill: rgba(20,20,20,0.52);
  --glass-stroke: rgba(255,255,255,0.14);
}