/* ============================================================
   DESTIN TUCKER — DESIGN TOKENS
   Palette, type scale, motion system.
   ============================================================ */

/* Animatable custom properties: lets the chrome cross-fade between
   colour worlds instead of hard-cutting. Progressive enhancement —
   without @property the values still apply, they just snap. */
@property --world-bg     { syntax: '<color>'; inherits: true; initial-value: #090A08; }
@property --world-fg     { syntax: '<color>'; inherits: true; initial-value: #F2E8D5; }
@property --world-accent { syntax: '<color>'; inherits: true; initial-value: #B6924A; }
@property --world-veil   { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  /* ---- Core palette ------------------------------------- */
  --obsidian:     #090A08;
  --obsidian-lift:#101210;
  --forest-deep:  #15372B;
  --forest-dark:  #0C241C;
  --forest-glow:  #1C4A38;
  --cream:        #F2E8D5;
  --ivory:        #FAF6EC;
  --gold:         #B6924A;
  --gold-pale:    #D1B978;
  --gold-deep:    #8A6E38;

  /* ---- Live world (driven by scroll) --------------------- */
  --world-bg:     var(--obsidian);
  --world-fg:     var(--cream);
  --world-accent: var(--gold);
  --world-veil:   0;
  --world-shift:  1100ms;

  /* ---- Type --------------------------------------------- */
  --f-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --f-sans:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid scale — 360px floor, 1600px ceiling */
  --step--2: clamp(0.66rem, 0.63rem + 0.14vw, 0.75rem);
  --step--1: clamp(0.78rem, 0.74rem + 0.20vw, 0.90rem);
  --step-0:  clamp(0.94rem, 0.89rem + 0.26vw, 1.10rem);
  --step-1:  clamp(1.13rem, 1.03rem + 0.48vw, 1.44rem);
  --step-2:  clamp(1.35rem, 1.18rem + 0.82vw, 1.94rem);
  --step-3:  clamp(1.62rem, 1.33rem + 1.36vw, 2.62rem);
  --step-4:  clamp(1.94rem, 1.48rem + 2.19vw, 3.53rem);
  --step-5:  clamp(2.33rem, 1.60rem + 3.44vw, 4.77rem);

  /* Editorial display sizes — deliberately oversized */
  --display-xl: clamp(4.2rem, 15.5vw, 15rem);
  --display-lg: clamp(2.8rem, 9.5vw, 8.5rem);
  --display-md: clamp(2.1rem, 6.2vw, 5.2rem);

  /* ---- Rhythm ------------------------------------------- */
  --gut:   clamp(1.25rem, 4vw, 3rem);
  --bleed: clamp(1.25rem, 5vw, 5.5rem);
  --chapter-pad: clamp(5rem, 13vh, 11rem);
  --rule: 1px;

  /* ---- Motion system ------------------------------------ */
  /* Custom easings — decisive out, weighted in-out. */
  --e-out:    cubic-bezier(0.16, 1, 0.30, 1);     /* expo-out: luxurious settle  */
  --e-inout:  cubic-bezier(0.76, 0, 0.24, 1);     /* weighted wipe               */
  --e-glide:  cubic-bezier(0.22, 0.61, 0.36, 1);  /* gentle UI                   */
  --e-snap:   cubic-bezier(0.34, 1.30, 0.64, 1);  /* slight overshoot            */
  --e-mask:   cubic-bezier(0.62, 0.05, 0.20, 1);  /* curtain / clip reveals      */

  --t-micro:     190ms;   /* hover tints, underlines            */
  --t-ui:        360ms;   /* buttons, cursor states, nav labels */
  --t-editorial: 780ms;   /* text + image reveals               */
  --t-cine:      1350ms;  /* chapter entrances, floods          */

  /* ---- Film grain (generated, never a bitmap download) ---- */
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

  --z-grain:   80;
  --z-chrome:  90;
  --z-menu:    100;
  --z-trans:   110;
  --z-cursor:  120;
}

/* ---- Colour worlds ---------------------------------------
   Each chapter declares a world; the chapter paints itself and
   simultaneously drives the fixed chrome via JS.                */
[data-world='night'] {
  --bg: var(--obsidian); --fg: var(--cream);
  --muted: color-mix(in srgb, var(--cream) 52%, transparent);
  --hair: color-mix(in srgb, var(--cream) 16%, transparent);
  --accent: var(--gold);
}
[data-world='forest'] {
  --bg: var(--forest-dark); --fg: var(--cream);
  --muted: color-mix(in srgb, var(--cream) 56%, transparent);
  --hair: color-mix(in srgb, var(--cream) 20%, transparent);
  --accent: var(--gold-pale);
}
[data-world='cream'] {
  --bg: var(--ivory); --fg: var(--obsidian);
  --muted: color-mix(in srgb, var(--obsidian) 58%, transparent);
  --hair: color-mix(in srgb, var(--obsidian) 18%, transparent);
  --accent: var(--gold-deep);
}
[data-world='paper'] {
  --bg: var(--cream); --fg: var(--forest-dark);
  --muted: color-mix(in srgb, var(--forest-dark) 62%, transparent);
  --hair: color-mix(in srgb, var(--forest-dark) 20%, transparent);
  --accent: var(--gold-deep);
}