/* ===========================
   DESIGN TOKENS
   Palette: Beige #DDD0C8 · Dark grey #323232
   =========================== */
:root {
  /* ── Backgrounds ── */
  --bg:          #F5EFE9;   /* lightest warm beige */
  --bg-alt:      #EDE5DC;   /* alternate section beige */
  --surface:     #FDFAF8;   /* off-white card surface */
  --surface-alt: #DDD0C8;   /* main beige (from spec) */

  /* ── Border ── */
  --border: #C9BBB1;        /* warm greige border */

  /* ── Text ── */
  --text:       #323232;    /* dark grey (from spec) */
  --text-muted: #7A6C65;    /* warm muted brown-grey */

  /* ── Accent — warm brown ── */
  --accent:       #7C5C45;  /* deep warm brown */
  --accent-2:     #9B7B6A;  /* lighter terracotta */
  --accent-hover: #5A3F2E;  /* dark hover */
  --tag-bg:       #EDE5DC;
  --tag-text:     #6B4F3A;

  /* ── Glass ── */
  --glass-bg:     rgba(253, 250, 248, 0.65);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur:   blur(22px) saturate(180%);
  --glass-shadow: 0 8px 32px rgba(107, 79, 58, 0.08), inset 0 1px 0 rgba(255,255,255,0.70);

  /* ── Shadows — warm brown tint ── */
  --shadow:    0 2px 20px rgba(107, 79, 58, 0.08);
  --shadow-lg: 0 8px 40px  rgba(107, 79, 58, 0.14);
  --shadow-xl: 0 24px 64px rgba(107, 79, 58, 0.18);

  /* ── Shape ── */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --nav-h:     68px;

  /* ── Typography ── */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* ── Motion ── */
  --transition: 0.25s ease;
  --spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg:          #1C1917;
  --bg-alt:      #231F1C;
  --surface:     #2C2722;
  --surface-alt: #343028;
  --border:      #47413A;
  --text:        #EDE5DC;
  --text-muted:  #A89A8E;

  --accent:       #C9A07A;  /* warm caramel */
  --accent-2:     #D4B08A;
  --accent-hover: #DFC190;
  --tag-bg:       #2C2722;
  --tag-text:     #C9A07A;

  --glass-bg:     rgba(35, 31, 28, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255,255,255,0.05);

  --shadow:    0 2px 20px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 40px  rgba(0, 0, 0, 0.42);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
}