/*
 * Happy Farmer — Design Tokens (landing page)
 * Source: design-reference/landing-page-review/authoritative-landing-page-reference.dc.html
 *   (a complete, real landing-page mockup — copy, palette, photography, layout).
 *   Cross-checked against screenshots/landing-preview.png and ecosystem-preview.png.
 *
 * SUPERSEDES the previous version of this file, which was derived from
 * design-reference/happy-farmer-design-system/ — a dashboard/app UI handoff
 * with NO landing-page mockups in it. That source is no longer authoritative
 * for this page. Do not merge values back in from it.
 *
 * Two AA contrast fixes applied vs. the raw reference — see "CONTRAST FIXES"
 * below. Everything else is pulled as-is from the reference's inline styles.
 */

:root {
  /* ==================================================================
     TYPOGRAPHY: FAMILY
     ================================================================== */
  --font-family-base: 'Plus Jakarta Sans', system-ui, sans-serif; /* only family in use — loaded via Google Fonts, used for headings AND body */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ==================================================================
     COLOR: BRAND
     ================================================================== */
  --color-primary: #1c7c3a;         /* signature green — primary CTAs, links, hero-word highlight, active nav */
  --color-primary-hover: #165f2e;   /* hover/pressed state for primary green fills and outlined green text */
  --color-accent-mid: #2d9e4f;      /* mid-green accent — connector lines, dot bullets, decorative borders. NOT for small text (see CONTRAST FIXES) */
  --color-accent-light: #4ade80;    /* light green accent — icons/checkmarks/badge text used ON dark-green backgrounds only */
  --color-dark-green: #0d3d1e;      /* dark section/card background — hero feature card, dark ecosystem card base, testimonial dark card, final CTA panel */
  --color-near-black: #0f1f0e;      /* body text color; also the footer background */
  --color-text-muted: #4a6050;      /* secondary/muted body copy, subheads, nav link default color */

  /* ==================================================================
     COLOR: SURFACES
     ================================================================== */
  --color-surface: #ffffff;         /* page canvas, cards, nav bar */
  --color-surface-tint: #e8f5ec;    /* light-green fill — pill badges, icon tiles, active table pills, feature-card CTA tile */
  --color-surface-faint: #f6fbf6;   /* alternating section background (logos bar, features, ecosystem, testimonials) */
  --color-border-light: #e4ede4;    /* default card border / hairline divider (faq-item, feature cards, stats grid gaps) */
  --color-border-mid: #d4e4d4;      /* stronger border — dashboard mockup wrap, browser-chrome divider */
  --color-border-accent: #c0dfc8;   /* pill/outline-button border on light backgrounds */

  /* ==================================================================
     COLOR: STATUS / SEMANTIC (used sparingly, as in the reference)
     ================================================================== */
  --color-warning: #f59e0b;         /* star ratings */
  --color-info: #2563eb;            /* blue — ONLY seen in one dashboard-mockup progress bar, not a general UI color */
  --color-info-light: #60a5fa;      /* gradient partner to --color-info in that same progress bar */
  --color-accent-purple: #9333ea;   /* single feature-card icon accent ("Nilai Tambah Komoditas") */
  --color-accent-amber: #d97706;    /* single feature-card icon accent ("Pelatihan Berkelanjutan") */
  --color-accent-amber-bg: #fef9ee; /* icon-tile background paired with --color-accent-amber */

  /* ==================================================================
     CONTRAST FIXES (WCAG 2.2 AA) — applied vs. the raw reference
     ================================================================== */
  /* FIX 1: reference .section-label uses --color-accent-mid (#2d9e4f) as
     TEXT color at 11px/700/uppercase on white — measures 3.43:1, fails the
     4.5:1 small-text AA threshold (this text never reaches the ~18.66px
     bold "large text" exception). Replaced with --color-primary (#1c7c3a),
     which measures 5.26:1 on white and reads as the same brand green family. */
  --color-label: var(--color-primary); /* use for ALL .section-label / eyebrow text on light backgrounds (Platform, Fitur Unggulan, Cara Kerja, Dampak Ekosistem, Cerita Petani, FAQ) */

  /* FIX 2: reference footer column labels (Platform / Perusahaan / Kontak)
     use rgba(255,255,255,.4) on #0f1f0e — measures 3.78:1, fails AA.
     Alpha raised from .4 to .5, which measures 5.16:1 on the same background. */
  --color-label-on-dark: rgba(255, 255, 255, 0.5); /* use for footer column-heading labels; was rgba(255,255,255,.4) */

  /* ==================================================================
     TYPE SCALE (extracted directly from the reference's inline styles)
     ================================================================== */
  --text-hero-h1: clamp(36px, 4.5vw, 54px);   /* weight 800, line-height 1.08, letter-spacing -.02em — hero H1 only */
  --text-section-h2: clamp(28px, 3.5vw, 40px); /* weight 800, letter-spacing -.02em — standard section heading (Platform, Fitur, Cara Kerja, Cerita Petani, FAQ) */
  --text-section-h2-eco: clamp(26px, 2.8vw, 36px); /* weight 800, line-height 1.15 — ecosystem section heading (narrower column) */
  --text-section-h2-cta: clamp(28px, 3.5vw, 44px); /* weight 800, line-height 1.15 — final CTA panel heading, slightly larger max */
  --text-feature-hero-h3: clamp(24px, 2.5vw, 32px); /* weight 800, line-height 1.2, letter-spacing -.01em — dark hero-feature-card heading */
  --text-step-h3: 18px;      /* weight 700 — "cara kerja" step titles */
  --text-card-title: 16px;   /* weight 700 (supporting feature cards) or 800 (ecosystem card captions) */
  --text-body-lg: 17px;      /* weight 400 — hero subhead */
  --text-body-md: 16px;      /* weight 400 — section subheads */
  --text-body: 15px;         /* weight 400 — feature-hero body, testimonial quotes, feature-hero checklist items */
  --text-body-sm: 14px;      /* weight 400-600 — nav links (500), faq answers (400), how-kerja step body (400), stat captions (500) */
  --text-body-xs: 13.5px;    /* weight 400-500 — supporting feature-card body, footer links, nav-link default */
  --text-label: 11px;        /* weight 700, uppercase, tracking .14em — .section-label eyebrows (use --color-label) */
  --text-label-footer: 11px; /* weight 700, uppercase, tracking .1em — footer column headings (use --color-label-on-dark) */
  --text-caption: 9px;       /* weight 700, uppercase, tracking .1em — ecosystem-card category caption, dashboard mockup micro-labels */
  --text-badge: 12px;        /* weight 600 — hero eyebrow pill, CTA-panel eyebrow pill */
  --text-stat: clamp(32px, 3.5vw, 48px); /* weight 800, letter-spacing -.02em — impact-stats numbers */

  --tracking-tight: -0.02em;  /* hero/section-heading letter-spacing */
  --tracking-tight-sm: -0.01em; /* feature-hero-card heading letter-spacing */
  --tracking-wide: 0.1em;     /* footer label / ecosystem-caption tracking */
  --tracking-widest: 0.14em;  /* .section-label eyebrow tracking */

  /* ==================================================================
     SPACING (base 4px; section rhythm uses larger, non-4px-locked values
     as seen in the reference — both are legitimate, keep both)
     ================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px; /* standard section vertical padding throughout the reference */

  --space-gutter: 5%; /* horizontal section padding — the reference uses a % gutter, not a fixed px, at every section */

  /* ==================================================================
     RADIUS
     ================================================================== */
  --radius-sm: 6px;      /* browser-chrome URL bar, small icon tiles */
  --radius-md: 8px;      /* buttons at their tightest (nav auth buttons), small icon tiles */
  --radius-lg: 10px;     /* hero/CTA-section primary + secondary buttons */
  --radius-xl: 12px;     /* feature-card icon tiles (44px box), floating hero badge */
  --radius-2xl: 16px;    /* feature cards, hero-feature-visual panel, dashboard-mockup wrap */
  --radius-3xl: 18px;    /* ecosystem cards, testimonial cards */
  --radius-4xl: 20px;    /* hero-feature dark card, hero image, impact-stats grid container */
  --radius-5xl: 28px;    /* final CTA panel — the largest radius on the page */
  --radius-full: 100px;  /* pills/badges — nav auth buttons' companion pill shapes, eyebrow pills, status pills, table pills */

  /* ==================================================================
     SHADOWS / ELEVATION
     ================================================================== */
  --shadow-btn-primary: 0 4px 16px rgba(28, 124, 58, 0.3);  /* primary green CTA buttons */
  --shadow-btn-nav: 0 2px 8px rgba(28, 124, 58, 0.25);      /* nav "Daftar Gratis" button */
  --shadow-btn-cta-panel: 0 4px 20px rgba(0, 0, 0, 0.2);    /* white CTA button on the dark final-CTA panel */
  --shadow-badge-float: 0 4px 16px rgba(0, 0, 0, 0.08);     /* floating "Verified Origin" hero badge */
  --shadow-hero-image: 0 24px 64px rgba(15, 31, 14, 0.18);  /* hero photography panel */
  --shadow-dashboard: 0 32px 80px rgba(15, 31, 14, 0.14);   /* product-preview browser-chrome mockup */
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.06);      /* supporting feature-card hover elevation */
  --shadow-mobile-menu: 0 8px 24px rgba(0, 0, 0, 0.08);     /* mobile dropdown nav panel */
}