/* =============================================================
   variables.css — Design Tokens (Single Source of Truth)
   Siti Fatima Painter Portfolio
   ============================================================= */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg-cream:    #F9F6F0;
  --color-bg-dark:     #1A1A2E;
  --color-gold:        #C9A96E;
  --color-burgundy:    #4A1A2C;
  --color-text-dark:   #1A1A2E;
  --color-text-light:  #F9F6F0;
  --color-text-muted:  #888888;
  --color-border:      rgba(26, 26, 46, 0.1);

  /* ── Typography ─────────────────────────────────────────── */
  --font-heading: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;

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

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width: 1400px;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow:   0.6s ease;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
}