/* ============================================
   DEMO A — TASTE / WARM EDITORIAL
   Design System Variables
   ============================================ */

:root {
  /* Palette — Warm sand base, editorial print aesthetic */
  --color-sand: #F5EDD9;
  --color-sand-light: #FAF6EE;
  --color-sand-dark: #EDE2CC;
  --color-ink: #2C1E0F;
  --color-ink-soft: #3D2D1A;
  --color-taupe: #9A8B77;
  --color-taupe-light: rgba(154, 139, 119, 0.12);
  --color-bronze: #8B7355;
  --color-bronze-hover: #6D5A43;
  --color-border: rgba(44, 30, 15, 0.09);
  --color-border-strong: rgba(44, 30, 15, 0.18);
  --color-psu-blue: #1E407C;
  --color-psu-blue-muted: rgba(30, 64, 124, 0.07);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;

  /* Spacing — 8px baseline grid */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;

  /* Layout */
  --max-width: 1400px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --nav-height: 72px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 0.6s;
  --duration-fast: 0.3s;
}