/* ============================================
   SMOKE & BLOOM — Design System
   "Botanical High-Life" Theme
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --surface: #fbf9f4;
  --surface-dim: #dbdad5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f3ee;
  --surface-container: #f0eee9;
  --surface-container-high: #eae8e3;
  --surface-container-highest: #e4e2dd;
  --on-surface: #1b1c19;
  --on-surface-variant: #434843;
  --inverse-surface: #30312e;
  --inverse-on-surface: #f2f1ec;
  --background: #fbf9f4;
  --on-background: #1b1c19;
  --surface-variant: #e4e2dd;
  --surface-tint: #4d6453;
  --primary: #061b0e;
  --on-primary: #ffffff;
  --primary-container: #1b3022;
  --on-primary-container: #819986;
  --inverse-primary: #b4cdb8;
  --primary-fixed: #d0e9d4;
  --primary-fixed-dim: #b4cdb8;
  --on-primary-fixed: #0b2013;
  --on-primary-fixed-variant: #364c3c;
  --secondary: #51634f;
  --on-secondary: #ffffff;
  --secondary-container: #d4e8ce;
  --on-secondary-container: #576955;
  --tertiary: #735c00;
  --on-tertiary: #ffffff;
  --tertiary-container: #cba72f;
  --on-tertiary-container: #4e3d00;
  --tertiary-fixed: #ffe088;
  --tertiary-fixed-dim: #e9c349;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --outline: #737973;
  --outline-variant: #c3c8c1;
  --accent: #c4652a;
  --on-accent: #ffffff;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px;
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --section-padding: 80px;
  --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(27,48,34,.06), 0 1px 2px rgba(27,48,34,.04);
  --shadow-md: 0 4px 12px rgba(27,48,34,.08), 0 2px 4px rgba(27,48,34,.04);
  --shadow-lg: 0 12px 32px rgba(27,48,34,.10), 0 4px 8px rgba(27,48,34,.06);
  --shadow-xl: 0 20px 48px rgba(27,48,34,.12), 0 8px 16px rgba(27,48,34,.06);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-size:1rem; line-height:1.6; color:var(--on-background); background:var(--background); overflow-x:hidden; }
body.no-scroll { overflow:hidden; }
::selection { background:var(--primary-container); color:var(--on-primary-container); }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; font-size:inherit; }

/* Typography */
.display-lg { font-family:var(--font-display); font-size:3rem; font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:var(--primary); }
.display-md { font-family:var(--font-display); font-size:2.5rem; font-weight:700; line-height:1.2; color:var(--primary); }
.headline-md { font-family:var(--font-display); font-size:2rem; font-weight:600; line-height:1.3; color:var(--primary); }
.headline-sm { font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.4; color:var(--primary); }
.body-lg { font-family:var(--font-body); font-size:1.125rem; line-height:1.6; }
.body-md { font-family:var(--font-body); font-size:1rem; line-height:1.6; }
.body-sm { font-family:var(--font-body); font-size:0.875rem; line-height:1.5; }
.label-caps { font-family:var(--font-body); font-size:0.75rem; font-weight:600; line-height:1; letter-spacing:0.1em; text-transform:uppercase; }
.button-text { font-family:var(--font-body); font-size:0.875rem; font-weight:600; line-height:1; }

/* Layout */
.container { max-width:var(--container-max); margin:0 auto; padding-left:var(--margin-mobile); padding-right:var(--margin-mobile); width:100%; }
.section { padding-top:var(--section-padding); padding-bottom:var(--section-padding); }
.text-center { text-align:center; }
.text-muted { color:var(--on-surface-variant); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Animations */
@keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 0 rgba(203,167,47,.3)} 50%{box-shadow:0 0 20px 4px rgba(203,167,47,.15)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-smooth), transform .6s var(--ease-smooth); }
.reveal.visible { opacity:1; transform:translateY(0); }
.stagger > *:nth-child(1){animation-delay:.05s} .stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.15s} .stagger > *:nth-child(4){animation-delay:.2s}
.stagger > *:nth-child(5){animation-delay:.25s} .stagger > *:nth-child(6){animation-delay:.3s}

@media (min-width:768px) {
  .container { padding-left:var(--margin-desktop); padding-right:var(--margin-desktop); }
  .display-lg { font-size:3.5rem; }
}
@media (min-width:1024px) { .display-lg { font-size:4rem; } }
@media (max-width:767px) {
  :root { --section-padding:48px; }
  .display-lg { font-size:2rem; }
  .display-md { font-size:1.75rem; }
  .headline-md { font-size:1.5rem; }
}