/* ============================================================
   tokens.css: the one source of colour, type and motion.

   Dark rooms are a velvet stage lit from above; light rooms are
   ivory, where Lawrence talks to you in his own words. Gold is his
   metal (金 is his Chinese surname and means gold), spent with
   restraint. Nothing here is borrowed from stillmakingstuff.com or
   from ReignSpire's navy.
   ============================================================ */

:root {
  /* ---- the stage (dark) ---- */
  --velvet-950: #120405;          /* vignette edges only */
  --velvet-900: #1B070A;          /* the cinema, the deepest room */
  --velvet:     #2A1015;          /* the ground */
  --velvet-700: #3A1A1F;          /* raised panels on the ground */
  --velvet-600: #4B262B;

  --warm:        #F7EFE4;         /* text on velvet, never pure white (C6) */
  --warm-muted:  rgba(247, 239, 228, 0.68);
  --warm-faint:  rgba(247, 239, 228, 0.46);
  --line-dark:   rgba(247, 239, 228, 0.13);

  /* ---- the house lights (light) ---- */
  --ivory:      #FCF8F3;
  --ivory-2:    #F4ECE3;          /* recessed surface on ivory */
  --ink:        #35191E;          /* wine ink, 15:1 on ivory */
  --ink-soft:   #5E4548;          /* 7.8:1 */
  --ink-faint:  rgba(53, 25, 30, 0.52);
  --line-light: rgba(53, 25, 30, 0.14);

  /* ---- gold: earned moments only (C3) ---- */
  --gold:        #D4A853;
  --gold-bright: #EACB86;
  --gold-deep:   #7A5518;         /* gold that reads on ivory, 6.3:1 */
  --gold-line:   rgba(212, 168, 83, 0.34);
  --gold-glow:   rgba(234, 203, 134, 0.26);
  --grad-gold:   linear-gradient(170deg, #F3DDA6 0%, #E2B866 38%, #B98A3E 100%);

  /* ---- sky: the one cool colour, taken from the sky in his train photograph.
          Lawrence's call (29 Sep 2026): a touch of light blue to balance the maroon.
          Secondary and social actions only; gold keeps the one primary action. ---- */
  --sky:       #9CC7EC;         /* on velvet, 9:1 */
  --sky-ink:   #2B5E8A;         /* on ivory, 6.5:1 */
  --sky-line:  rgba(156, 199, 236, 0.46);
  --sky-wash:  rgba(156, 199, 236, 0.1);

  /* ---- stage light ---- */
  --lamp:       255, 212, 158;    /* tungsten, as an rgb triple for alpha use */
  --lamp-core:  rgba(255, 220, 170, 0.30);

  /* ---- lapis: the blue "pages" (his call, 30 September 2026): a new room of colour in a few chosen
          places (his own quote, the open doors), crossfading in like the ivory story does ---- */
  --lapis:      #16275E;
  --lapis-deep: #0C1638;
  --lapis-glow: 72, 108, 214;     /* rgb triple, for the light inside a blue room */

  /* ---- the Chinese Bridge stage (Watch Me Win field) ---- */
  --bridge-red:  #9A1C24;
  --bridge-deep: #4A0A10;

  /* ---- type ---- */
  --font-display: "LK Song", "Gloock", "Bodoni 72", "Didot", "Big Caslon", "Georgia",
                  "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  /* --font-title (IBM Plex Serif, 30 September 2026) retired 2 October 2026, his ruling: every title is Gloock again */
  /* his own quote */
  --font-quote:   "Inter", "Helvetica Neue", "Arial", sans-serif;
  --font-text:    "LK Song", "Crimson Pro", "Iowan Old Style", "Palatino Linotype", "Palatino",
                  "Georgia", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --font-ui:      "Instrument Sans", "Helvetica Neue", "Helvetica", "Arial",
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-zh:      "LK Song", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;

  --t-hero:   clamp(2.6rem, 1rem + 4.1vw, 5rem);
  --t-h1:     clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem);
  --t-h2:     clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem);
  --t-h3:     clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  --t-lead:   clamp(1.3rem, 1.12rem + 0.6vw, 1.6rem);
  --t-body:   clamp(1.13rem, 1.06rem + 0.3vw, 1.3rem);
  --t-small:  0.95rem;
  --t-ui:     0.9rem;
  --t-micro:  0.78rem;

  /* ---- motion: grace over speed (M1). Clicks share the curve (M4). ---- */
  --ease-grace: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-grace:  1500ms;
  --dur-open:   850ms;
  --dur-hover:  550ms;
  --dur-lights: 1400ms;
  --rise:       48px;
  --settle:     9px;

  /* ---- shape and depth ---- */
  --r-pill:  999px;
  --r-sheet: 22px;
  --r-card:  18px;
  --r-photo: 14px;
  --shadow-sheet: 0 60px 120px -40px rgba(10, 2, 4, 0.82), 0 24px 48px -24px rgba(10, 2, 4, 0.6);
  --shadow-float: 0 30px 60px -30px rgba(10, 2, 4, 0.7);
  --shadow-print: 0 40px 70px -40px rgba(53, 25, 30, 0.45), 0 8px 18px -10px rgba(53, 25, 30, 0.25);

  --gutter:  clamp(16px, 4.2vw, 56px);
  --measure: 62ch;
}