/* Design tokens — single source of truth for color, type, spacing,
   radius, shadow, and motion. Components should reference these
   variables rather than repeating raw values.

   Milestone 1 (Safety Baseline and CSS Isolation): every custom
   property here is prefixed --emt-js-* (was a bare generic name, e.g.
   --color-bg) and declared on .emt-journey-studio instead of :root —
   previously these were global, document-wide custom properties,
   collision-prone against a WordPress theme's or another plugin's own
   same-named tokens. No compatibility aliases are kept on :root; every
   var() reference across every stylesheet was updated to match. Every
   Journey-Studio-owned root element carries this class (see
   index.html), so these tokens resolve identically everywhere they
   did before — just never outside Journey Studio's own markup. */

.emt-journey-studio {
  /* ============ COLOR ============ */
  --emt-js-color-bg: #faf6ef; /* warm ivory page background */
  --emt-js-color-bg-alt: #f1e9da; /* soft selected-card / tinted background */
  --emt-js-color-surface: #ffffff; /* crisp white — reserved for tactile, interactive surfaces (cards) */
  --emt-js-color-surface-quiet: #fdfbf6; /* barely-there warm white for the outer panels, so they read as a calm page, not another box */
  --emt-js-color-ink: #2b2621; /* charcoal heading text */
  --emt-js-color-ink-muted: #5a5045; /* warm grey body text */
  --emt-js-color-border: #e3d6c2; /* subtle border tone */

  --emt-js-color-terracotta: #c1683b; /* terracotta accent (borders, hover rings) */
  --emt-js-color-terracotta-strong: #9c4e2c; /* terracotta primary accent */
  --emt-js-color-terracotta-deep: #7c3e22; /* darker terracotta hover/active state */

  --emt-js-color-green: #33473b; /* deep green secondary accent */
  --emt-js-color-green-strong: #24352c; /* deep green, stronger (dev panel, status) */

  --emt-js-color-focus: #9c4e2c; /* focus ring color */

  --emt-js-color-disabled-bg: var(--emt-js-color-border); /* disabled control background */
  --emt-js-color-disabled-text: var(--emt-js-color-ink-muted); /* disabled control text — ~5.4:1 against --emt-js-color-disabled-bg, still readable */

  --emt-js-color-success: #33473b; /* success state — reuses deep green accent */

  /* ============ TYPOGRAPHY ============ */
  --emt-js-font-display: Georgia, "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", serif;
  --emt-js-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Display / heading sizes */
  --emt-js-text-display-xl: clamp(2rem, 4vw, 2.75rem); /* Inspiration H1 */
  --emt-js-text-display-lg: clamp(1.4rem, 2.4vw, 1.75rem); /* Studio title (secondary to the question) */
  --emt-js-text-display-md: clamp(1.75rem, 3.2vw, 2.25rem); /* Question heading — the dominant, primary text on screen */
  --emt-js-text-display-sm: clamp(1.15rem, 2vw, 1.4rem); /* Widget prompt / small display moments */

  /* Body / supporting sizes */
  --emt-js-text-body: 1rem;
  --emt-js-text-support: 1.05rem; /* supporting copy under a heading */
  --emt-js-text-eyebrow: 0.8rem; /* eyebrow labels */
  --emt-js-text-label: 0.85rem; /* phase labels, small uppercase labels */
  --emt-js-text-card-title: 1.15rem;
  --emt-js-text-card-copy: 0.95rem;
  --emt-js-text-button: 1rem;

  /* ============ SPACING ============ */
  --emt-js-space-0: 0.25rem;
  --emt-js-space-1: 0.5rem;
  --emt-js-space-2: 1rem;
  --emt-js-space-3: 1.5rem;
  --emt-js-space-4: 2rem;
  --emt-js-space-5: 3rem;
  --emt-js-space-6: 4rem;

  /* ============ RADIUS ============ */
  --emt-js-radius-sm: 6px; /* small controls */
  --emt-js-radius-md: 12px; /* buttons */
  --emt-js-radius-lg: 16px; /* cards — a quiet rectangle, not an app-bubble */
  --emt-js-radius-panel: 18px; /* the Studio panel / widget panel */
  --emt-js-radius-pill: 999px; /* reserved for future pill-shaped elements */

  /* ============ SHADOWS ============ */
  /* Softened throughout — depth should be felt, not seen. */
  --emt-js-shadow-card: 0 2px 10px rgba(43, 38, 33, 0.05); /* resting card */
  --emt-js-shadow-card-elevated: 0 6px 18px rgba(43, 38, 33, 0.07); /* card hover */
  --emt-js-shadow-widget: 0 6px 20px rgba(43, 38, 33, 0.06); /* sticky widget */
  --emt-js-shadow-selected: 0 2px 8px rgba(156, 78, 44, 0.1); /* selected card — warm, restrained, not a glow */

  /* ============ MOTION ============ */
  --emt-js-motion-fast: 150ms;
  --emt-js-motion-standard: 250ms;
  --emt-js-motion-reveal: 550ms;
  --emt-js-motion-image-crossfade: 350ms; /* booklet image panel crossfade (per-travel-type, per-timing-mode) */
  --emt-js-motion-modal: 300ms; /* modal open/close fade+scale (Modal Architecture milestone) */
  --emt-js-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============ LAYOUT ============ */
  --emt-js-content-max-width: 1280px;
  --emt-js-breakpoint-stack: 900px;
}