/* =============================================
   VARIABLES.CSS – Design tokens
   ============================================= */

:root {
  /* Colours */
  --color-background:   #f7eee7;
  --color-surface:      #fffaf6;
  --color-primary:      #6f3d25;
  --color-primary-dark: #3d2116;
  --color-accent:       #b68d6d;
  --color-text:         #2e211b;
  --color-muted:        #7c6d64;
  --color-border:       rgba(111, 61, 37, 0.18);
  --color-white:        #ffffff;
  --color-overlay:      rgba(45, 27, 16, 0.58);

  /* Shadows */
  --shadow-soft:        0 15px 40px rgba(62, 35, 23, 0.10);
  --shadow-card:        0 4px 20px rgba(62, 35, 23, 0.08);
  --shadow-hover:       0 20px 50px rgba(62, 35, 23, 0.16);
  --shadow-header:      0 2px 20px rgba(62, 35, 23, 0.12);

  /* Border radii */
  --radius-small:  12px;
  --radius-medium: 20px;
  --radius-large:  32px;
  --radius-pill:   100px;

  /* Layout */
  --container-width: 1200px;
  --section-padding: 100px;

  /* Typography */
  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-body:  'Montserrat', system-ui, sans-serif;

  /* Transitions */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.35s ease;
  --transition-slow:   0.55s ease;
}