/**
 * BlackSeedSource - Base CSS
 * Reset + Design Tokens + Typography + Container
 *
 * LOAD ORDER: base.css -> components.css -> pages.css
 * RULE: body, h1-h6, p, .button etc. are ONLY defined here. Page CSS cannot override.
 */

/* ==========================================================================
   DESIGN SYSTEM RULES (Reference for all pages)
   ==========================================================================

   1) TYPOGRAPHY STANDARD
      - Body min: 16px (desktop 17-18px) → --fs-2
      - Small/muted min: 14px (never below) → --fs-0 is 14px minimum
      - H1: clamp(1.75rem, 4vw, 2.5rem) font-semibold
      - H2: clamp(1.5rem, 3vw, 2rem) font-semibold
      - Paragraph: --fs-2 (17px) with line-height 1.7
      - Max line length: 65-75ch

   2) ICON POLICY (Lucide only, size caps)
      - Icon set: Lucide outline only, NO emoji
      - Card icons: 20-24px
      - Feature/step icons: 56-72px max (container 64-80px)
      - Icon badge: soft bg (#f6f6f8) + thin border (1-1.5px)
      - Icons NEVER scale with font size
      - stroke-width: 1.5-2

   3) BUTTON STANDARD
      - Default: height 44-48px, padding 12px 20-24px, --fs-2, rounded-xl
      - Small: height 40px, padding 10px 16px, --fs-1
      - Wrapper: flex flex-wrap gap-3
      - No giant pills, no text overlap

   4) SPACING STANDARD
      - Section: py-12 to py-16 (--s7 = 44px, max py-20)
      - Headline spacing: mb-4 to mb-6 (--s4 to --s5)
      - Grid gap: gap-6 to gap-8 (--s5 to --s6)

   5) COLOR / CONTRAST RULE
      - Dark bg: NEVER black text
      - Hero overlay: bg-black/35 + text-white/90, title drop-shadow
      - Footer: heading text-white, body text-white/80, icons text-white/70

   6) CARD STANDARD
      - Radius: 16-20px (--r-md to --r-lg)
      - Border: 1px rgba(0,0,0,0.08)
      - Hover: translateY(-2 to -4px) + gold border highlight optional

   7) QA CHECKLIST (every PR)
      □ Mobile + desktop: no overflow
      □ No unreadable text on dark bg
      □ Icon size caps respected
      □ Button doesn't overlap content
      □ Critical pages: home, /black-seed-oil, /bulk-black-seed-oil, /about, /quality

   ========================================================================== */

/* ==========================================================================
   Design Tokens (Single Source of Truth)
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;

  /* Font sizes - Minimum readable standard */
  --fs-0: 15px;   /* muted/small - MINIMUM 15px (global rule) */
  --fs-1: 15px;   /* secondary text */
  --fs-2: 17px;   /* base body text - 16px+ enforced */
  --fs-3: 19px;   /* large body / small heading */
  --fs-4: 22px;   /* h4 / card title */
  --fs-5: 28px;   /* h3 / section title */
  --fs-6: 36px;   /* h2 / page title */

  /* Line heights - readable */
  --lh-tight: 1.25;
  --lh-normal: 1.7;

  /* Colors */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-light: #f8fafc;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, .75);
  --border: rgba(15, 23, 42, .12);

  /* Brand colors */
  --primary: #2c3e50;
  --primary-dark: #1a252f;
  --secondary: #3498db;
  --accent: #e67e22;
  --accent-dark: #d35400;

  /* Button tokens (single source of truth) */
  --btn-primary-bg: var(--accent);
  --btn-primary-text: #fff;
  --btn-primary-hover-bg: var(--accent-dark);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--text);
  --btn-secondary-border: var(--border);
  --btn-secondary-hover-bg: var(--primary);
  --btn-secondary-hover-text: #fff;
  --btn-outline-text: var(--primary);
  --btn-outline-border: var(--primary);
  --btn-outline-hover-bg: var(--primary);
  --btn-outline-hover-text: #fff;

  /* Status colors */
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;

  /* Radius + shadow */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-full: 9999px;
  --shadow-sm: 0 6px 22px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Spacing */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;

  /* Layout */
  --container-width: 1120px;
  --container-padding: 20px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
}

/* ==========================================================================
   CSS Reset
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-normal);
  background: var(--bg);
  color: var(--text);
}

/* Prevent overflow from specific elements, NOT body */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   Typography (Global Standard - ONE source of truth)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--primary);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-6);
  margin: 0 0 var(--s4);
}

h2 {
  font-size: var(--fs-5);
  margin: 0 0 var(--s3);
}

h3 {
  font-size: var(--fs-4);
  margin: 0 0 var(--s2);
}

h4 {
  font-size: var(--fs-3);
  margin: 0 0 var(--s2);
}

h5, h6 {
  font-size: var(--fs-2);
  margin: 0 0 var(--s2);
}

p, li {
  font-size: var(--fs-2);
  line-height: var(--lh-normal);
  color: var(--muted);
  margin-bottom: var(--s3);
}

a {
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Exclude buttons from generic anchor hover color */
a.button:hover,
a.button-primary:hover,
a.button-secondary:hover,
a.button-secondary-inverse:hover,
a.button-outline:hover,
a.btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.nav-cta:hover {
  color: revert;
  text-decoration: none;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--fs-1);
}

/* ==========================================================================
   Container Standard
   ========================================================================== */

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

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

/* ==========================================================================
   Mobile Typography Adjustments
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    /* Reduce heading sizes on mobile */
    --fs-6: 28px;  /* h1: 36px → 28px */
    --fs-5: 22px;  /* h2: 28px → 22px */
    --fs-4: 19px;  /* h3: 22px → 19px */
    --fs-3: 17px;  /* h4: 19px → 17px */
  }

  body {
    font-size: 16px;
  }

  h1 {
    font-size: var(--fs-6);
    margin-bottom: var(--s3);
  }

  h2 {
    font-size: var(--fs-5);
    margin-bottom: var(--s2);
  }

  h3 {
    font-size: var(--fs-4);
  }

  p, li {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* ==========================================================================
   Section Utilities
   ========================================================================== */

.section-padding {
  padding: var(--s7) 0;
}

.section-title {
  font-size: var(--fs-5);
  text-align: center;
  margin-bottom: var(--s4);
  color: var(--primary);
}

.section-subtitle {
  font-size: var(--fs-3);
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s6);
  color: var(--muted);
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--muted);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-contrast: high) {
  :root {
    --border: #000;
    --muted: var(--text);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .site-header,
  .menu-toggle,
  .site-footer {
    display: none;
  }

  body {
    font-size: 12pt;
  }

  a {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}