/* ═══════════════════════════════════════════════════════════════════
   AgroNutikas Design System — colors_and_type.css · v8.1
   Combined token layer: 7 surfaces (web-light + app-dark + investor-dark +
   admin-dark + print-light + deck-dark + social-light)
   See: AgroNutikas Design System Rulebook v8.1.md §14 Token Architecture

   v8.1: repo-wide version alignment to v8.1 (no token, value or
   component changes — identity/reference bump only).

   v7.7 additions:
   - Marketing site tokens (Archivo font, ink-offset shadow system,
     corner-marker accents, cartographic grid, CTA amber gradient,
     section rhythm, hero layout, 18 marketing components)
   - Marketing-specific breakpoint tokens
   - --font-marketing-display for Archivo 700-900
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=DM+Mono:wght@400;500&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;

  /* Marketing site hero / headings (v7.7) */
  --font-marketing-display: 'Archivo', system-ui, sans-serif;

  /* Brand wordmark (v7.7) */
  --font-brand: 'Outfit', '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 (heritage swatch — not used in canonical wordmark since v7.8) */
  --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;

  /* ── Canonical wordmark (v7.8) ──────────────────────────
     The wordmark is the only mark. Use these tokens — and only
     these — for the "Agro" / "Nutikas" colour split. */
  --wordmark-light-agro:    #0A1A0C;   /* "Agro" on light/cream surfaces */
  --wordmark-light-nutikas: #047857;   /* "Nutikas" on light/cream surfaces */
  --wordmark-dark-agro:     #FAFAF7;   /* "Agro" on dark/ink surfaces */
  --wordmark-dark-nutikas:  #10B981;   /* "Nutikas" on dark/ink surfaces */

  /* ── 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:              #3F5A3F;   /* web secondary    — AA on cream (was #4A6B4A) */
  --fg3:              #44603F;   /* web tertiary     — AA 4.6:1 on #FAFAF7 (was #5E755E, 3.2:1) */
  --fg-muted:         #4A6648;   /* web disabled-ish — AA-large only */

  --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:      #2554D4;   /* AA on white  — was #3570F4 (3.6:1) → now 5.1:1 */
  --status-info-bg:   rgba(37,84,212,0.08);
  --status-info-border: rgba(37,84,212,0.25);
  --status-info-text: #102E9C;

  --status-draft:     #A35E2B;   /* muld / soil — darkened from #C47F48 to disambiguate from --status-warn */
  --status-draft-bg:  rgba(163,94,43,0.08);
  --status-draft-border: rgba(163,94,43,0.25);
  --status-draft-text:#7A3F18;
  --status-draft-pattern: repeating-linear-gradient(45deg, transparent 0 4px, rgba(163,94,43,0.18) 4px 5px); /* hatched fill, separates from warn at glance */

  /* ── Semantic — DARK app surface (mapped to --deep-earth #060807) ─ */
  --status-clean-dark:        #4ADE80;
  --status-clean-dark-bg:     rgba(74,222,128,0.14);
  --status-clean-dark-border: rgba(74,222,128,0.32);
  --status-clean-dark-text:   #86EFAC;   /* AA 9.1:1 on #060807 */

  --status-warn-dark:         #F5C938;
  --status-warn-dark-bg:      rgba(245,201,56,0.14);
  --status-warn-dark-border:  rgba(245,201,56,0.30);
  --status-warn-dark-text:    #FCD34D;   /* AA 11.4:1 on #060807 */

  --status-danger-dark:       #F87171;
  --status-danger-dark-bg:    rgba(248,113,113,0.14);
  --status-danger-dark-border:rgba(248,113,113,0.32);
  --status-danger-dark-text:  #FCA5A5;   /* AA 7.6:1 on #060807 */
  --status-danger-dark-pattern: repeating-linear-gradient(45deg, transparent 0 4px, rgba(248,113,113,0.20) 4px 5px);

  --status-info-dark:         #7DD3FC;
  --status-info-dark-bg:      rgba(125,211,252,0.14);
  --status-info-dark-border:  rgba(125,211,252,0.32);
  --status-info-dark-text:    #BAE6FD;   /* AA 12.1:1 on #060807 */

  --status-draft-dark:        #E8703A;
  --status-draft-dark-bg:     rgba(232,112,58,0.14);
  --status-draft-dark-border: rgba(232,112,58,0.30);
  --status-draft-dark-text:   #FDBA74;

  --status-pending:           #9CA3AF;   /* indeterminate / syncing — fresh tier */
  --status-pending-bg:        rgba(156,163,175,0.10);
  --status-pending-border:    rgba(156,163,175,0.30);
  --status-pending-text:      #4B5563;
  --status-pending-dark:      #CBD5E1;
  --status-pending-dark-bg:   rgba(203,213,225,0.10);
  --status-pending-dark-border:rgba(203,213,225,0.28);
  --status-pending-dark-text: #E2E8F0;

  /* Color-blind safe overrides for charts (use alongside --verdant-web / --golden-harvest) */
  --cb-series-1:      #0E5A8A;   /* deep blue — replaces emerald in deuteranopia mode */
  --cb-series-2:      #DDAA33;   /* mustard — replaces amber */
  --cb-series-3:      #6B3FA0;   /* violet  — third series */
  --cb-series-4:      #BB5566;   /* dusty rose — fourth series */

  /* ── 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-0:  0;
  --sp-px: 1px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;     /* added in v0.3 — closes 16→24 jump for input padding / card inner */
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --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;   /* WCAG minimum */
  --touch-secondary:  44px;
  --hit-target-field: 56px;   /* gloved field-ops minimum (forms / primary buttons in app) */
  --hit-target-icon:  44px;   /* icon-only button — 24px glyph in 44px square */

  /* ── Type tracking ──────────────────────────────────────── */
  --tracking-tight:  -0.025em; /* hero, h1 */
  --tracking-snug:   -0.015em; /* h2, h3 */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.12em;
  --tracking-mono:    0.18em;

  /* ── Type — italic / emphasis ───────────────────────────── */
  /* Italic permitted ONLY in display lockups for a single emphasized
     word (e.g. <em>growing</em>). Never in body, never in app surfaces. */
  --italic-display: italic;

  /* ── Marketing site — ink-offset shadow system (v7.7) ────── */
  --ink:                #0A1A0C;   /* marketing site ink — card borders, headings */
  --shadow-ink-card:    3px 3px 0 #0A1A0C;     /* feature / pilot / pricing cards */
  --shadow-ink-device:  0 1px 0 #0A1A0C, 4px 4px 0 #0A1A0C, 0 20px 40px -16px rgba(10,26,12,0.25);
  --shadow-ink-steel:   2px 2px 0 #0A1A0C;     /* steel button offset */
  --shadow-ink-screenshot: 0 20px 40px -16px rgba(10,26,12,0.3), 4px 4px 0 #0A1A0C;
  --shadow-ink-focus:   3px 3px 0 #047857;     /* form input focus */

  /* ── Marketing site — CTA amber gradient (v7.7) ────────── */
  --cta-gradient:       linear-gradient(180deg, #E88A1A 0%, #D97706 58%, #C96A04 100%);
  --cta-border:         #B45309;
  --cta-shadow:         inset 0 1px 0 rgba(255,220,160,0.55), inset 0 -1px 0 rgba(120,50,0,0.18), 0 1px 0 rgba(120,50,0,0.08), 0 4px 10px -4px rgba(180,83,9,0.4);
  --cta-shadow-hover:   inset 0 1px 0 rgba(255,230,180,0.65), 0 6px 14px -4px rgba(180,83,9,0.5), 0 2px 4px rgba(120,50,0,0.15);

  /* ── Marketing site — corner markers (v7.7) ────────────── */
  --corner-marker-size:   8px;
  --corner-marker-width:  1.5px;
  --corner-marker-color:  #047857;  /* verdant-dark */

  /* ── Marketing site — cartographic grid (v7.7) ─────────── */
  --grid-hero-size:     48px;
  --grid-hero-color:    rgba(4,120,87,0.04);
  --grid-cta-size:      32px;
  --grid-cta-color:     rgba(16,185,129,0.06);
  --grid-map-fill:      #F0EBDE;     /* warm cream map bg */
  --grid-map-stroke:    #D8D2C5;

  /* ── Marketing site — section rhythm (v7.7) ────────────── */
  --section-py-marketing:      96px;
  --section-py-marketing-mobile: 64px;
  --section-rail-color:  #D6DED2;
  --section-rail-width:  1px;
  --section-alt-bg:      #F5F3EE;

  /* ── Marketing site — typography hierarchy (v7.7) ───────── */
  --h1-marketing:       clamp(40px, 5.2vw, 68px);  /* Archivo 900 */
  --h2-marketing:       clamp(28px, 3.2vw, 42px);  /* Archivo 800 */
  --h3-marketing:       18px;                       /* Archivo 700 */
  --lead-marketing:     17px;                       /* Inter 400 */
  --overline-marketing: 11px;                       /* DM Mono 600, 0.14em */
  --mono-marketing:     13px;                       /* DM Mono 400, 0.02em */
  --fine-marketing:     10.5px;                     /* DM Mono 400, 0.05em */

  /* ── Marketing site — container (v7.7) ─────────────────── */
  --container-max:      1280px;
  --container-pad:      40px;
  --container-pad-mobile: 20px;

  /* ── Marketing site — breakpoints (v7.7) ────────────────── */
  --bp-marketing-xs:   640px;
  --bp-marketing-sm:   720px;
  --bp-marketing-md:   820px;
  --bp-marketing-lg:   960px;
  --bp-marketing-xl:   1000px;

  /* ── Marketing site — foreground overrides (v7.7) ──────── */
  --fg-ink:             #0A1A0C;   /* headings, card borders, hard dividers */
  --fg-body:            #2A3E2A;   /* lead text, card body */
  --fg-field-muted:     #5A6E5A;   /* mono labels, coordinates, units */
  --fg-field-light:     #7A8F7A;   /* meta, spec keys, muted refs */
  --fg-separator:       #C9CFC4;   /* middle-dot separators, hero-proof */
  --fg-dashed-rule:     #D6DED2;   /* KV list, feature-meta borders */

  /* ── Chart fills ────────────────────────────────────────── */
  --chart-area-fill: 0.20;     /* opacity of area-chart fills */
  --chart-axis-color: var(--fg3);
  --chart-axis-color-dark: var(--fg4-dark);
  --chart-grid-color: rgba(10,26,12,0.06);
  --chart-grid-color-dark: rgba(255,255,255,0.06);

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

  /* ── Marketing site — nav (v7.7) ────────────────────────── */
  --nav-glass-bg:       rgba(250,250,247,0.92);
  --nav-blur:           20px;
  --nav-scrolled-shadow: 0 1px 4px rgba(0,0,0,0.05);
  --nav-link-hover-bg:  rgba(4,120,87,0.07);
  --nav-active-color:   #047857;

  /* ── Marketing site — footer (v7.7) ────────────────────── */
  --footer-bg:          #0A1A0C;
  --footer-border-top:  3px solid #047857;
  --footer-text:        rgba(250,250,247,0.72);
  --footer-text-muted:  rgba(250,250,247,0.48);
  --footer-link:        rgba(250,250,247,0.64);
  --footer-link-hover:  #10B981;
  --footer-brand-accent: #10B981;

  /* ── Marketing site — progress bar (v7.7) ──────────────── */
  --progress-height:    2px;
  --progress-color:     #047857;
  --progress-z:         200;
}

/* ═══════════════════════════════════════════════════════════
   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); }