@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0");

/* =========================
   DESIGN SYSTEM TOKENS
========================= */

:root {
  /* Brand */
  --color-brand: #b83227;
  --color-brand-dark: #6f1f17;
  --color-brand-deep: #3b0f0b;
  --color-brand-soft: #f8d8d1;

  /* Accent */
  --color-accent: #f0b429;
  --color-accent-dark: #8a5208;
  --color-accent-soft: #ffe7a3;
  --color-fresh: #3f7d52;
  --color-fresh-soft: #e7f1e8;

  /* Neutral */
  --color-ink: #1c1613;
  --color-text: #332720;
  --color-muted: #6c5a4d;
  --color-border: #d8bfa9;
  --color-border-inverse: rgba(255, 247, 233, 0.28);
  --color-surface: #ffffff;
  --color-surface-warm: #fff7e9;
  --color-background: #f4eadb;

  /* Surfaces on dark backgrounds */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #ffe8bd;
  --color-footer-bg: #681d16;
  --color-footer-bg-deep: #4a120d;
  --color-footer-button: rgba(255, 255, 255, 0.16);
  --color-footer-button-hover: var(--color-accent);

  /* Semantic */
  --color-success: #2f7d4f;
  --color-warning: #b7791f;
  --color-error: #b42318;

  /* Typography */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-primary: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.8rem, 3vw, 2.4rem);
  --text-3xl: clamp(2.2rem, 4vw, 3.25rem);
  --text-hero: clamp(2.6rem, 6vw, 4.75rem);

  --line-tight: 1.1;
  --line-heading: 1.2;
  --line-body: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(31, 25, 22, 0.08);
  --shadow-md: 0 10px 24px rgba(31, 25, 22, 0.12);
  --shadow-lg: 0 18px 38px rgba(31, 25, 22, 0.16);

  /* Layout */
  --container: 1180px;
  --container-narrow: 860px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --header-height: 88px;

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 360ms ease;

  /* Z-index */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;

  /* Temporary legacy aliases */
  --color-primary: var(--color-brand);
  --color-primary-dark: var(--color-brand-dark);
  --color-white: var(--color-surface);
  --color-gray: #f5f1eb;
  --max-width: var(--container);
  --shadow-light: var(--shadow-sm);
  --radius: var(--radius-md);
  --transition: var(--transition-base);
}

@media (max-width: 70rem) {
  :root {
    --header-height: 72px;
  }
}

@media (max-width: 48rem) {
  :root {
    --container-padding: clamp(0.875rem, 4vw, 1.25rem);
    --section-y: clamp(3rem, 10vw, 4.5rem);
  }
}