/* ==========================================================================
   Kōhī by Ifuku — design tokens
   Palette sampled from the room itself: raw plaster, warm wood, the indigo
   noren over the counter, and the near-black of a record sleeve.
   ========================================================================== */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --ink:          #14110d;   /* near-black, warm — record sleeve            */
  --ink-2:        #241f19;
  --ink-3:        #3a332b;

  --paper:        #f4f1ea;   /* warm off-white — the plaster walls          */
  --paper-2:      #ebe6db;
  --plaster:      #d9d2c4;

  --stone:        #675f53;   /* muted body text on paper (AA on --paper)    */
  --stone-2:      #8d8477;   /* decorative only — rules, hairlines          */

  --indigo:       #3d6076;   /* the noren                                   */
  --indigo-deep:  #22394a;
  --indigo-soft:  #8fadc0;   /* for use on dark backgrounds                 */

  --clay:         #a9663c;   /* wood + terracotta                           */
  --matcha:       #7f9159;

  /* Semantic ------------------------------------------------------------- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     var(--stone);
  --accent:       var(--indigo);
  --rule:         color-mix(in srgb, var(--stone-2) 38%, transparent);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans:    'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale, 320px → 1440px viewport */
  --text-xs:   clamp(0.6875rem, 0.66rem + 0.14vw,  0.75rem);
  --text-sm:   clamp(0.8125rem, 0.79rem + 0.11vw,  0.875rem);
  --text-base: clamp(1rem,      0.96rem + 0.18vw,  1.125rem);
  --text-md:   clamp(1.125rem,  1.05rem + 0.36vw,  1.375rem);
  --text-lg:   clamp(1.375rem,  1.21rem + 0.80vw,  1.875rem);
  --text-xl:   clamp(1.75rem,   1.41rem + 1.70vw,  3rem);
  --text-2xl:  clamp(2.25rem,   1.61rem + 3.20vw,  4.5rem);
  --text-3xl:  clamp(2.75rem,   1.30rem + 7.25vw,  8rem);

  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.65;

  --tracking-wide: 0.16em;   /* small caps labels */
  --tracking-tight: -0.02em; /* display headings  */

  --measure: 62ch;
  --measure-narrow: 46ch;

  /* ---- Space ----------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(5rem, 3rem + 10vw, 11rem);  /* section rhythm */

  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
  --wrap:   85rem;

  /* ---- Form ------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius:    3px;
  --hairline:  1px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       340ms;
  --dur-slow:  720ms;

  --header-h: 4.75rem;
}

/* Sections that invert to the dark, listening-room palette. */
.is-dark {
  --bg:       var(--ink);
  --fg:       var(--paper);
  --fg-muted: color-mix(in srgb, var(--paper) 62%, transparent);
  --accent:   var(--indigo-soft);
  --rule:     color-mix(in srgb, var(--paper) 20%, transparent);
}