/* ============================================================
   tokens.css — design tokens for hangzhou.me
   Rice-paper humanities-led palette with restrained osmanthus gold
   ============================================================ */

:root {
  /* Surfaces (warm rice paper) */
  --paper:        #F5F1E8;   /* primary background */
  --paper-warm:   #EFE9DC;   /* slightly deeper ivory for bands */
  --paper-cool:   #F8F6F0;   /* near-white for cards */
  --paper-deep:   #1A1814;   /* ink black for dark sections */

  /* Ink (text) */
  --ink:          #1A1814;   /* primary text, not pure black */
  --ink-soft:     #4B4742;   /* secondary text */
  --ink-mute:     #847E72;   /* meta text */
  --ink-faint:    #B6AFA0;   /* hairlines, placeholders */
  --ink-on-deep:  #F5F1E8;   /* text on dark */
  --ink-on-soft:  #2C2924;

  /* Accents */
  --gold:         #B88B3A;   /* osmanthus gold (desaturated, <80%) */
  --gold-deep:    #8C6823;   /* hover / focus */
  --gold-soft:    #D9B66A;   /* light tints */
  --celadon:      #6E8E80;   /* jade secondary support */
  --celadon-soft: #B5C8BD;
  --crimson:      #8C2B2B;   /* sparing accent */

  /* Lines */
  --line:         rgba(26, 24, 20, 0.10);
  --line-soft:    rgba(26, 24, 20, 0.06);
  --line-on-deep: rgba(245, 241, 232, 0.12);

  /* Type scale (modular, fluid) */
  --f-d1: clamp(3.2rem, 5.8vw + 1rem, 6.4rem);
  --f-d2: clamp(2.4rem, 3.4vw + 1rem, 4.0rem);
  --f-d3: clamp(1.6rem, 1.4vw + 0.8rem, 2.2rem);
  --f-h1: clamp(1.8rem, 1.2vw + 1rem, 2.4rem);
  --f-h2: 1.5rem;
  --f-h3: 1.18rem;
  --f-body: 1rem;
  --f-small: 0.875rem;
  --f-tiny: 0.75rem;
  --f-mono: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-body: 1.6;
  --lh-loose: 1.7;

  /* Space scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Layout */
  --w-page: 1400px;
  --w-prose: 68ch;
  --w-narrow: 960px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-pill: 999px;

  /* Shadows (low-elevation, paper feel) */
  --sh-1: 0 1px 0 rgba(26,24,20,0.04);
  --sh-2: 0 6px 18px -8px rgba(26,24,20,0.18), 0 1px 0 rgba(26,24,20,0.04);
  --sh-3: 0 18px 48px -24px rgba(26,24,20,0.28), 0 2px 0 rgba(26,24,20,0.04);
  --sh-deep: 0 24px 60px -28px rgba(0,0,0,0.6), 0 1px 0 rgba(0,0,0,0.4);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 540ms;

  /* Fonts */
  --font-serif: "Newsreader", "Cormorant Garamond", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Inter Tight", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Z-stack */
  --z-nav: 60;
  --z-lightbox: 90;
  --z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}