/* ==========================================================================
   Production Manchala — Design Tokens
   Light editorial theme: off-white canvas, pure-brown section separation,
   deepened gold + slate accents for contrast on light surfaces.
   ========================================================================== */

:root {
  /* ---- Color: brand brown (section separation) ---- */
  --color-brown: #3e1c00;
  --color-brown-deep: #2a1300;
  --color-brown-soft: #6b3410;

  /* ---- Color: surfaces ---- */
  --color-bg: #f5f2ec;
  --color-bg-alt: var(--color-brown);
  --color-bg-raised: #efeae0;
  --color-bg-surface: #fffdf8;
  --color-bg-surface-2: #f1ebe1;
  --color-border: rgba(62, 28, 0, 0.16);
  --color-border-strong: rgba(62, 28, 0, 0.34);

  /* ---- Color: type ---- */
  --color-ink: #241a12;
  --color-ink-muted: #5b4a3d;
  --color-ink-faint: #6f5d4e;

  /* ---- Color: accents ---- */
  --color-gold: #7d611e;
  --color-gold-bright: #614911;
  --color-gold-dim: #a68743;
  --color-on-gold: #fdfaf3;
  --color-silver: #5f6570;
  --color-silver-bright: #3f4550;

  /* ---- Color: semantic ---- */
  --color-success: #3f7a4a;
  --color-error: #a53b2c;

  /* ---- Gradients (subtle, low-saturation only) ---- */
  --grad-gold: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold-bright));
  --grad-veil: linear-gradient(180deg, rgba(245,242,236,0) 0%, rgba(245,242,236,0.9) 100%);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --fs-display-xl: clamp(2.75rem, 5.6vw, 6rem);
  --fs-display-lg: clamp(2.25rem, 4.2vw, 4rem);
  --fs-display-md: clamp(1.75rem, 3vw, 2.75rem);
  --fs-display-sm: clamp(1.4rem, 2vw, 1.9rem);
  --fs-body-lg: clamp(1.05rem, 1.2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.14em;
  --ls-wider: 0.22em;

  /* ---- Spacing (8px base scale) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 11rem;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 12px rgba(70, 40, 10, 0.08);
  --shadow-md: 0 12px 40px rgba(70, 40, 10, 0.14);
  --shadow-gold-glow: 0 0 0 1px rgba(125, 97, 30, 0.28), 0 8px 30px rgba(62, 28, 0, 0.16);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-float: 150;
  --z-overlay: 200;
  --z-modal: 300;
}