/* ============================================
   MARIANN GRAY · Design Tokens
   Garden direction · April 2026
   ============================================ */

:root {
  /* —— COLORS —— */
  --color-cream: #faf3ec;
  --color-cream-deep: #f3e9da;
  --color-peach: #fce4d6;
  --color-rose: #e8b4b8;
  --color-rose-soft: #f8c8d0;
  --color-terra: #c8927e;
  --color-terra-deep: #a87560;
  --color-burgundy: #6b3a3a;
  --color-burgundy-deep: #4a2424;
  --color-gold: #c4a47a;
  --color-gold-soft: #d4b88a;
  --color-ink: #3a1f24;
  --color-ink-soft: #6b4a4f;

  --color-line: rgba(58, 31, 36, 0.12);
  --color-line-soft: rgba(58, 31, 36, 0.06);
  --color-overlay: rgba(58, 31, 36, 0.5);

  /* —— TYPOGRAPHY —— */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script: 'Sacramento', 'Cormorant Garamond', cursive;
  --font-armenian: 'Noto Serif Armenian', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Inter', monospace;

  /* —— TYPE SCALE —— */
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: clamp(28px, 3.5vw, 44px);
  --text-3xl: clamp(38px, 5vw, 64px);
  --text-4xl: clamp(50px, 7vw, 90px);
  --text-display: clamp(72px, 11vw, 168px);

  /* —— SPACING —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 180px;

  /* —— LAYOUT —— */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* —— MOTION —— */
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 0.25s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;
  --duration-slower: 1.4s;

  /* —— SHADOWS —— */
  --shadow-soft: 0 4px 24px rgba(107, 58, 58, 0.08);
  --shadow-medium: 0 12px 40px rgba(107, 58, 58, 0.12);
  --shadow-strong: 0 24px 60px rgba(107, 58, 58, 0.18);
  --glow-rose: 0 0 60px rgba(232, 180, 184, 0.6);

  /* —— Z-INDEX —— */
  --z-grain: 1;
  --z-petals: 2;
  --z-content: 10;
  --z-nav: 50;
  --z-cursor: 100;
  --z-preloader: 200;
}