:root {
  /* Color palette — pulled from logo + chalkboard, per spec */
  --color-espresso:         #3B2314;
  --color-espresso-soft:    #5A3A26;
  --color-cream:            #F5F0E8;
  --color-cream-deep:       #EDE4D6;
  --color-gold:             #C4A265;
  --color-gold-deep:        #A68855;
  --color-chalkboard:       #2F4A3D;
  --color-ink:              #2A1810;
  --color-ink-muted:        #5C4A3F;
  --color-paper:            #FAF6EE;
  --color-border:           #D9CFBC;

  /* Typography */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.8125rem;   /* 13 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-base: 1.0625rem;   /* 17 — larger body text for warmth */
  --fs-lg:   1.1875rem;   /* 19 */
  --fs-xl:   1.375rem;    /* 22 */
  --fs-2xl:  1.75rem;     /* 28 */
  --fs-3xl:  2.25rem;     /* 36 */
  --fs-4xl:  2.75rem;     /* 44 */
  --fs-5xl:  3.5rem;      /* 56 */

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Layout */
  --container:        72rem;  /* 1152 */
  --container-narrow: 44rem;  /* 704 */
  --container-wide:   80rem;  /* 1280 */

  /* Misc */
  --radius:    4px;
  --radius-lg: 10px;
  --shadow:    0 2px 8px rgba(42, 24, 16, 0.08);
  --shadow-lg: 0 8px 24px rgba(42, 24, 16, 0.12);

  /* Subtle paper grain — SVG feTurbulence, inline data URI. ~300 bytes.
     Tiled 180px, colored espresso-ish, 6% alpha. Renders once, browser
     caches as pattern. Applied to cream/paper backgrounds to break flatness. */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.14 0 0 0 0 0.08 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}