/**
 * Design tokens — Brian Jerel Atelier / vision map palette
 * Deep charcoal ground, metallic gold accents, warm ivory type.
 */

:root {
  /* Core palette */
  --color-void: #0a0908;
  --color-bg: #12100e;
  --color-bg-elevated: #1a1714;
  --color-bg-surface: #242018;
  --color-bg-warm: #1f1b16;

  --color-ink: #f2f0ec;
  --color-ivory: #f2f0ec;
  --color-warm-white: #faf8f5;
  --color-charcoal: #e5e1d9;
  --color-charcoal-soft: #cfc9be;

  --color-stone-100: #2a2622;
  --color-stone-200: #3d3630;
  --color-stone-300: #6b5f52;
  --color-taupe: #8a7a68;

  --color-gold: #d4b06a;
  --color-gold-bright: #e8cc8a;
  --color-gold-muted: #a68b5b;
  --color-gold-dim: rgba(212, 176, 106, 0.32);

  /* Semantic */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-gold-muted);
  --color-border: color-mix(in srgb, var(--color-gold-muted) 36%, transparent);
  --color-accent: var(--color-gold);

  /* Typography — display serif + literary body + registry mono */
  --font-display: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
  --font-body: "Spectral", "Iowan Old Style", "Palatino Linotype", serif;
  --font-ui: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: clamp(0.6875rem, 0.62rem + 0.22vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.76rem + 0.22vw, 0.9375rem);
  --text-base: clamp(1rem, 0.94rem + 0.22vw, 1.125rem);
  --text-lg: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.35rem, 1.1rem + 0.95vw, 1.85rem);
  --text-2xl: clamp(1.85rem, 1.35rem + 1.65vw, 3rem);
  --text-3xl: clamp(2.35rem, 1.5rem + 2.75vw, 4rem);
  --text-hero: clamp(2.85rem, 1.5rem + 5.5vw, 5.75rem);

  --leading-tight: 1.12;
  --leading-snug: 1.38;
  --leading-body: 1.68;
  --tracking-caps: 0.28em;
  --tracking-wide: 0.06em;
  --tracking-display: -0.03em;

  /* Layout — gallery proportion, generous rhythm */
  --measure: 36rem;
  --measure-hero: 56.25rem; /* ~900px — page hero / intro bands */
  --measure-wide: 76rem;
  --gutter: clamp(1.35rem, 4.5vw, 3.25rem);
  --section-y: clamp(4.5rem, 11vw, 9.5rem);
  --radius-arch: 999px;
  --radius-arch-soft: clamp(1rem, 3vw, 2rem);
  --radius-lintel: 0.25rem;
  --frame-mat: clamp(7px, 1.25vw, 14px);
  --frame-liner: color-mix(in srgb, var(--color-gold) 38%, transparent);
  --shadow-soft: 0 28px 80px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.38);
  --shadow-inset-stone: inset 0 2px 14px rgba(0, 0, 0, 0.32);

  /* Ambient depth — warm center glow like the vision map */
  --bg-atmosphere:
    radial-gradient(ellipse 80% 58% at 50% 12%, color-mix(in srgb, var(--color-bg-warm) 92%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 42% at 0% 0%, color-mix(in srgb, var(--color-gold-muted) 10%, transparent), transparent 52%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--color-void) 88%, transparent), transparent 55%),
    linear-gradient(180deg, var(--color-void) 0%, var(--color-bg) 48%, var(--color-void) 100%);
  --texture-light: radial-gradient(
    ellipse 72% 58% at 50% 30%,
    color-mix(in srgb, var(--color-bg-warm) 75%, transparent),
    transparent 72%
  );
  --texture-ruled: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent calc(9rem - 1px),
    color-mix(in srgb, var(--color-gold-muted) 10%, transparent) calc(9rem - 1px),
    color-mix(in srgb, var(--color-gold-muted) 10%, transparent) 9rem
  );

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.55s;
}