/* base.css — Design tokens and reset for Celiac Hub */

/* ========== FONTS ========== */
@import url('https://api.fontshare.com/v2/css?f[]=zodiak@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ========== CSS RESET ========== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 70px;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ========== DESIGN TOKENS ========== */
:root {
  /* Primary Colors */
  --green-50: #f0f9f4;
  --green-100: #d8f0e3;
  --green-200: #b0e0c7;
  --green-300: #7ccba2;
  --green-400: #4aad7a;
  --green-500: #2D7A4F;
  --green-600: #236340;
  --green-700: #1a4d31;
  --green-800: #123823;
  --green-900: #0a2316;

  /* Wheat / Accent */
  --wheat-50: #fdf8ed;
  --wheat-100: #f9efd4;
  --wheat-200: #f2dfa8;
  --wheat-300: #e8ca72;
  --wheat-400: #D4A843;
  --wheat-500: #c49530;
  --wheat-600: #a67825;
  --wheat-700: #885c1e;
  --wheat-800: #6a4618;
  --wheat-900: #4c3112;

  /* Neutrals (warm) */
  --warm-50: #FDFBF7;
  --warm-100: #F8F4ED;
  --warm-200: #F0EADF;
  --warm-300: #E4DCD0;
  --warm-400: #C8BFAF;
  --warm-500: #A09688;
  --warm-600: #786E62;
  --warm-700: #5A524A;
  --warm-800: #3D3732;
  --warm-900: #252220;

  /* Semantic */
  --success: #2D7A4F;
  --warning: #D4A843;
  --danger: #C4493C;
  --info: #3B82B8;

  /* Light theme surfaces */
  --bg-primary: var(--warm-50);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: var(--warm-100);
  --bg-card: #FFFFFF;
  --bg-hero-overlay: rgba(15, 25, 18, 0.65);

  /* Light text */
  --text-primary: var(--warm-900);
  --text-secondary: var(--warm-600);
  --text-tertiary: var(--warm-500);
  --text-inverse: #FFFFFF;
  --text-accent: var(--green-500);
  --text-link: var(--green-600);

  /* Borders */
  --border-light: var(--warm-200);
  --border-medium: var(--warm-300);

  /* Typography */
  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-hero: clamp(2.5rem, 5vw, 4.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 900px;
  --header-height: 64px;
  --bottom-nav-height: 64px;

  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ========== DARK MODE ========== */
[data-theme="dark"] {
  --bg-primary: #1a1b1e;
  --bg-secondary: #242529;
  --bg-tertiary: #2c2d32;
  --bg-card: #2c2d32;
  --bg-hero-overlay: rgba(10, 12, 10, 0.75);

  --text-primary: #f0ece6;
  --text-secondary: #a8a29e;
  --text-tertiary: #8a8480;
  --text-inverse: #1a1b1e;
  --text-accent: var(--green-300);
  --text-link: var(--green-300);

  --border-light: #3a3b40;
  --border-medium: #4a4b50;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2);
}

/* ========== BASE STYLES ========== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Utility classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Scroll animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ad slots */
.ad-slot {
  width: 100%;
  max-width: 728px;
  margin: var(--space-8) auto;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ad-slot::before {
  content: 'Publicidade';
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.ad-slot--sidebar {
  max-width: 300px;
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}