/* ═══════════════════════════════════════════════════════════════════
   AgroNutikas Design System — colors_and_type.css
   Combined token layer: web (light/warm) + app (dark/bioluminescent)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700;800&subset=latin-ext&display=swap');

:root {
  /* ── Font families ──────────────────────────────────────── */
  --font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Web-site display (marketing) */
  --font-web-display: 'Space Grotesk', system-ui, sans-serif;

  /* ── Type scale (Major Third · 1.35x) ─────────────────── */
  --text-3xl:  2.333rem;   /* 37px */
  --text-2xl:  1.944rem;   /* 31px */
  --text-xl:   1.620rem;   /* 26px */
  --text-lg:   1.350rem;   /* 22px */
  --text-base: 1.000rem;   /* 16px */
  --text-sm:   0.875rem;   /* 14px min body */
  --text-xs:   0.75rem;    /* 12px min uppercase */

  /* ── Brand palette — bioluminescent cartography ───────── */
  --verdant:          #00E87A;   /* bioluminescent green (logomark reference) */
  --verdant-app:      #4ADE80;   /* UI-safe verdant (dark theme) */
  --verdant-web:      #059669;   /* emerald web-site primary */
  --verdant-dark:     #047857;
  --verdant-deep:     #00A855;
  --golden-harvest:   #F5C938;
  --golden-hover:     #D49318;
  --terracotta:       #E8703A;
  --amber:            #D97706;   /* web warn / CTA secondary */
  --amber-dark:       #B45309;

  /* ── Surfaces — DARK (app) ──────────────────────────────── */
  --deep-earth:       #060807;
  --loam:             #0A0E0B;
  --canopy:           #111613;
  --surface-1:        rgba(255,255,255,0.025);
  --surface-2:        rgba(255,255,255,0.055);

  /* ── Surfaces — LIGHT (web) ─────────────────────────────── */
  --bg:               #FAFAF7;
  --bg2:              #F5F3EE;
  --bg3:              #EDEAE3;
  --surface:          #FFFFFF;
  --surface2:         #F5F3EE;
  --surface-warm:     #FAFAF8;

  /* ── Foreground / text ──────────────────────────────────── */
  --fg1:              #1A2E1A;   /* web primary text — forest near-black */
  --fg2:              #4A6B4A;   /* web secondary */
  --fg3:              #5E755E;   /* web tertiary */
  --fg-muted:         #5A7A5A;

  --fg1-dark:         #FFFFFF;
  --fg2-dark:         #E8E8E8;
  --fg3-dark:         rgba(255,255,255,0.72);
  --fg4-dark:         rgba(255,255,255,0.50);

  /* ── Semantic status colors (light) ─────────────────────── */
  --status-clean:     #18AD5F;   /* go */
  --status-clean-bg:  rgba(5,150,105,0.08);
  --status-clean-border: rgba(5,150,105,0.25);
  --status-clean-text:#065F46;

  --status-warn:      #D49318;   /* caution */
  --status-warn-bg:   rgba(217,119,6,0.08);
  --status-warn-border: rgba(217,119,6,0.2);
  --status-warn-text: #92400E;

  --status-danger:    #DC2626;
  --status-danger-bg: rgba(220,38,38,0.06);
  --status-danger-border: rgba(220,38,38,0.25);
  --status-danger-text: #991B1B;

  --status-info:      #3570F4;
  --status-info-bg:   rgba(53,112,244,0.08);
  --status-info-text: #173FD6;

  --status-draft:     #C47F48;   /* muld / soil */
  --status-draft-bg:  rgba(196,127,72,0.08);
  --status-draft-text:#975234;

  /* ── Borders / rules ────────────────────────────────────── */
  --border:           #E5E2DB;
  --border-subtle:    rgba(5,150,105,0.12);
  --border-hover:     rgba(5,150,105,0.25);
  --border-dark:      rgba(255,255,255,0.07);
  --border-dark-active: rgba(74,222,128,0.28);

  /* ── Radius ─────────────────────────────────────────────── */
  --rad-xs:   4px;
  --rad-sm:   6px;
  --rad-md:   10px;
  --rad-lg:   14px;
  --rad-xl:   18px;
  --rad-2xl:  24px;
  --rad-pill: 9999px;
  --rad-full: 100px;

  /* ── Spacing — 8px base (web) + 4px mini (app) ─────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --section-py: clamp(64px, 10vw, 128px);
  --section-py-tight: clamp(48px, 7vw, 96px);

  /* ── Shadows (light) ────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-lg: 0 8px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.10), 0 8px 20px rgba(0,0,0,0.05);

  /* ── Shadows + glows (dark) ─────────────────────────────── */
  --shadow-sm-dark: 0 1px 4px rgba(0,0,0,0.35);
  --shadow-md-dark: 0 2px 12px rgba(0,0,0,0.45);
  --shadow-lg-dark: 0 4px 28px rgba(0,0,0,0.55);
  --shadow-glow-sm: 0 0 14px rgba(74,222,128,0.18);
  --shadow-glow-md: 0 0 28px rgba(74,222,128,0.30);
  --shadow-glow-lg: 0 0 48px rgba(74,222,128,0.50);
  --shadow-harvest-glow: 0 0 24px rgba(245,201,56,0.25);
  --focus-ring: 0 0 0 3px rgba(74,222,128,0.45);
  --focus-ring-web: 0 0 0 3px rgba(5,150,105,0.30);

  /* ── Motion ─────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  200ms;
  --dur-slow:    340ms;
  --dur-reveal:  560ms;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-organic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Touch ──────────────────────────────────────────────── */
  --touch-min: 48px;
  --touch-secondary: 44px;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  800;
  --z-header:   900;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* ═══════════════════════════════════════════════════════════
   Semantic element styles — apply by class or nested tags
   ═══════════════════════════════════════════════════════════ */

.ds-root {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-display,
.ds h1, .ds h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg1);
  line-height: 1.1;
}

.ds h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.08; }
.ds h2 { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; line-height: 1.15; }
.ds h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; }
.ds h4 { font-family: var(--font-sans); font-size: 16px; font-weight: 600; }

.ds .section-label,
.ds-overline {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verdant-web);
}

.ds p, .ds .body {
  font-size: 16px;
  color: var(--fg2);
  line-height: 1.7;
}

.ds .lead { font-size: 18px; line-height: 1.6; color: var(--fg2); }
.ds small, .ds .caption { font-size: 13px; color: var(--fg3); }

.ds code, .ds .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg1);
  background: rgba(0,0,0,0.04);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Dark-mode theme (opt-in) */
.ds-dark {
  background: var(--deep-earth);
  color: var(--fg1-dark);
}
.ds-dark h1, .ds-dark h2, .ds-dark h3, .ds-dark h4 { color: var(--fg1-dark); }
.ds-dark p, .ds-dark .body { color: var(--fg3-dark); }
.ds-dark small, .ds-dark .caption { color: var(--fg4-dark); }
.ds-dark .section-label, .ds-dark .ds-overline { color: var(--verdant-app); }