/**
 * Stephuary semantic design tokens — spacing, type scale, layout, focus.
 * Serif: Playfair Display (Canela not bundled). Sans: Inter (Söhne not bundled).
 * Color semantics align with existing surfaces; time-based palettes remain
 * in stephuary-time-atmosphere.css, stephuary-early-mode.css, stephuary-god-hour.css.
 */

:root {
  /* ——— Font stacks (commercial alternatives noted in comments) ——— */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-serif: 500;

  /* ——— Type scale — desktop-first; mobile overridden below ——— */
  --text-h1: clamp(2.375rem, 0.5rem + 4.2vw, 4rem);
  --text-h2: clamp(1.75rem, 0.4rem + 2.5vw, 2.5rem);
  --text-h3: clamp(1.375rem, 0.35rem + 1.5vw, 1.75rem);
  --text-h4: clamp(1.125rem, 0.2rem + 0.8vw, 1.25rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.8125rem;
  --text-label: 0.6875rem;
  --text-nav: 0.625rem;

  --lh-h1: 1.1;
  --lh-h2: 1.15;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-body: 1.6;
  --lh-small: 1.5;

  --letter-h: -0.02em;
  --letter-body: normal;
  --letter-ui: 0.12em;
  --letter-label: 0.18em;
  --letter-label-wide: 0.2em;

  /* Legacy label sizes (mono) — map to scale */
  --font-label: 0.5rem;
  --font-label-md: 0.5625rem;
  --font-label-lg: 0.625rem;

  /* ——— 8px spacing system ——— */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 80px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Legacy aliases (keep for existing components) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  --section-y-desktop: 96px;
  --section-y-desktop-lg: 128px;
  --section-y-mobile: 64px;
  --section-y-mobile-lg: 72px;
  --stack-tight: 16px;
  --stack-medium: 24px;
  --stack-loose: 32px;

  /* ——— Layout ——— */
  --layout-max: 1200px;
  --prose-width: 720px;
  --prose-narrow: 640px;
  --container-pad-x: 24px;

  --btn-pad-y: 12px;
  --btn-pad-x: 24px;

  --radius-sm: 2px;
  --radius-md: 6px;

  --focus-ring: 2px solid rgba(58, 107, 255, 0.55);
  --focus-ring-gold: 2px solid rgba(196, 163, 90, 0.55);
  --focus-offset: 2px;

  /* Semantic colors — defaults match core dark identity */
  --bg-primary: #030303;
  --bg-secondary: #080807;
  --bg-elevated: rgba(13, 13, 11, 0.72);
  --text-primary: #f4ede0;
  --text-secondary: #b5aa9c;
  --text-tertiary: #7a7268;
  --accent-primary: #3a6bff;
  --accent-gold: #c4a35a;
  --line-subtle: rgba(244, 237, 224, 0.08);
}

@media (max-width: 640px) {
  :root {
    --text-h1: clamp(2.375rem, 1.5rem + 3vw, 2.75rem);
    --text-h2: clamp(1.75rem, 1.25rem + 1.5vw, 2rem);
    --text-h3: clamp(1.375rem, 1.1rem + 1vw, 1.5rem);
    --text-body-lg: 1.0625rem;
    --section-y-desktop: var(--section-y-mobile);
    --section-y-desktop-lg: var(--section-y-mobile-lg);
    --container-pad-x: 20px;
  }
}

html.early-mode {
  --accent-primary: var(--blue, #c9784a);
}

html.god-hour {
  --text-primary: #ebe4d4;
  --text-secondary: rgba(205, 196, 180, 0.9);
  --text-tertiary: rgba(132, 124, 112, 0.92);
  --accent-gold: #c9a56e;
}

/**
 * Page environments — same token names, different atmospheric weight.
 * Home: highest presence. Systems (and sibling tool pages): cooler, flatter.
 * Pricing: slightly warmer structure.
 */
body[data-sh-env='home'] {
  --bg-secondary: #070706;
  --line-subtle: rgba(244, 237, 224, 0.095);
  --text-secondary: rgba(188, 180, 168, 0.92);
  --accent-gold: #c9a56e;
}

body[data-sh-env='systems'] {
  --bg-secondary: #050504;
  --line-subtle: rgba(244, 237, 224, 0.055);
  --text-secondary: rgba(158, 150, 138, 0.88);
  --text-tertiary: rgba(98, 92, 84, 0.95);
  --accent-gold: #b8944e;
}

body[data-sh-env='pricing'],
body.pricing-page {
  --bg-secondary: #0c0a08;
  --line-subtle: rgba(244, 237, 224, 0.1);
  --text-secondary: rgba(210, 200, 184, 0.9);
  --accent-gold: #d4b474;
}