/* The SL Scene: design tokens (ported from handoff/tokens/*.css)
   Warm gallery-white palette. Ink is warm near-black. No saturated hues anywhere. */
:root {
  /* Color: base */
  --sl-ink: #1C1915;            /* warm near-black, primary ink */
  --sl-ink-soft: #40392F;       /* softened ink for long-form text */
  --sl-taupe: #6E6355;          /* secondary text, captions */
  --sl-stone: #A2988A;          /* tertiary, placeholders, quiet labels */
  --sl-champagne: #C0B09A;      /* metallic accent, used sparingly */
  --sl-linen: #E7E0D4;          /* deep tint, hairline fills */
  --sl-ivory: #F0EBE2;          /* section tint, card tint */
  --sl-alabaster: #F7F4EE;      /* soft page tint */
  --sl-paper: #FDFCF9;          /* page white */
  --sl-white: #FFFFFF;

  /* Color: semantic surfaces */
  --surface-page: var(--sl-paper);
  --surface-tint: var(--sl-alabaster);
  --surface-card: var(--sl-white);
  --surface-card-tint: var(--sl-ivory);
  --surface-inverse: var(--sl-ink);

  /* Color: semantic text */
  --text-display: var(--sl-ink);
  --text-body: var(--sl-ink-soft);
  --text-secondary: var(--sl-taupe);
  --text-quiet: var(--sl-stone);
  --text-inverse: var(--sl-paper);
  --text-accent: var(--sl-champagne);

  /* Color: lines + interaction */
  --line-hair: rgba(28, 25, 21, 0.14);
  --line-strong: var(--sl-ink);
  --line-on-inverse: rgba(253, 252, 249, 0.28);
  --focus-ring: rgba(28, 25, 21, 0.35);

  /* Color: forms */
  --field-bg: transparent;
  --field-line: rgba(28, 25, 21, 0.30);
  --field-line-focus: var(--sl-ink);
  --field-placeholder: var(--sl-stone);
  --error: #8C4A3F;             /* muted terracotta, form validation only */

  /* Typography: families */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-script: 'WindSong', cursive;

  /* Typography: scale (desktop reference) */
  --size-hero: 64px;        /* serif 300, lh 1.08 */
  --size-display: 46px;     /* serif 300-400, lh 1.15 */
  --size-title: 32px;       /* serif 400, lh 1.2 */
  --size-heading: 24px;     /* serif 400-500, lh 1.3 */
  --size-lead: 19px;        /* serif 400 or sans 300, lh 1.6 */
  --size-body: 15px;        /* sans 300-400, lh 1.75 */
  --size-caption: 13px;     /* sans 400, lh 1.6 */
  --size-label: 11px;       /* sans 500, uppercase, tracked */
  --size-script: 42px;      /* WindSong accent */

  --leading-tight: 1.08;
  --leading-display: 1.15;
  --leading-heading: 1.3;
  --leading-body: 1.75;

  --tracking-caps: 0.32em;        /* eyebrows, nav, buttons */
  --tracking-caps-wide: 0.42em;   /* hero eyebrows, footer wordmark */
  --tracking-serif-caps: 0.18em;  /* serif smallcaps moments */
  --tracking-body: 0.01em;

  /* Spacing + layout: generous air is the brand */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;

  --container-max: 1200px;
  --container-text: 680px;  /* long-form measure */
  --container-pad: 48px;
  --section-gap: 128px;     /* vertical rhythm between sections */
  --grid-gap: 32px;

  /* Effects: borders, shadow, motion. Sharp corners, hairlines, no drop shadows */
  --radius-none: 0px;       /* the brand radius: everything is square */
  --radius-full: 999px;     /* circular crops + badge only */

  --border-hair: 1px solid var(--line-hair);
  --border-strong: 1px solid var(--line-strong);

  --shadow-none: none;
  --shadow-lift: 0 12px 40px rgba(28, 25, 21, 0.10);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  --img-hover-scale: 1.03;
  --overlay-scrim: linear-gradient(to top, rgba(28,25,21,0.55), rgba(28,25,21,0) 55%);
}

/* Responsive type scale: same tokens, smaller reference sizes under ~640px.
   Everything that reads var(--size-*) adjusts automatically. */
@media (max-width: 640px) {
  :root {
    --size-hero: 42px;
    --size-display: 34px;
    --size-title: 26px;
    --size-heading: 20px;
    --size-lead: 17px;
  }
}