/* ==========================================================================
   Base CSS Variables - Design Tokens
   Single source of truth for all design system values
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Colors
     -------------------------------------------------------------------------- */
  --color-background: #f9f8f6;
  --color-surface: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-accent-primary: #a3aeb7;
  --accentPrimary: #a3aeb7;
  --color-accent-secondary: #b6c1c3;
  --color-border: #eae8e4;
  --color-border-light: #dcdcdc;
  --color-error: #c0392b;

  /* --------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------- */
  --font-display: "Bodoni Moda", serif;
  --font-body: "Work Sans", sans-serif;
  --font-accent: "Parisienne", cursive;

  /* --------------------------------------------------------------------------
     Spacing Scale
     -------------------------------------------------------------------------- */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 2rem;     /* 32px */
  --space-lg: 4rem;     /* 64px */
  --space-xl: 8rem;     /* 128px */

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-reveal: opacity 0.6s ease, transform 0.8s ease;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-base: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-image: 0 32px 70px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.08);

  /* --------------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------------- */
  --max-width-content: 1200px;
  --max-width-text: 60ch;

  /* --------------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------------- */
  --z-base: 0;
  --z-above: 1;
  --z-header: 50;
  --z-modal: 100;
  --z-overlay: 200;
}