/*
 * FarmDoc Design System — design-tokens.css
 * Three-layer token architecture: Primitive → Semantic → Component
 * Import this file FIRST in index.html; everything else references var(--*)
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   LAYER 1 — PRIMITIVE TOKENS
   Raw values. Never use these directly in components.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Greens (brand) */
  --prim-green-900: #0d3d20;
  --prim-green-800: #145e31;
  --prim-green-700: #1a7a40;   /* brand primary */
  --prim-green-600: #1f8f4a;
  --prim-green-500: #2fa85e;
  --prim-green-200: rgba(26,122,64,.28);
  --prim-green-100: rgba(26,122,64,.14);
  --prim-green-50:  rgba(26,122,64,.08);
  --prim-green-glow:rgba(26,122,64,.18);

  /* Neutrals */
  --prim-neutral-950: #1a2e22;
  --prim-neutral-700: #4a6e58;
  --prim-neutral-400: #93b8a2;
  --prim-neutral-100: #eef5f1;
  --prim-neutral-50:  #f2f7f4;
  --prim-white:       #ffffff;

  /* Danger / Red — muted (text/border/icon use) */
  --prim-red-700:   #b91c1c;
  --prim-red-100:   rgba(185,28,28,.07);
  --prim-red-200:   rgba(185,28,28,.20);
  --prim-red-glow:  rgba(185,28,28,.40);

  /* Danger / Red — vivid (alerts, validation, recording-pulse: needs to read
     as urgent at a glance, where the muted red above is too quiet) */
  --prim-red-vivid-rgb: 220,38,38;

  /* Amber / Warning — muted (text/border use) */
  --prim-amber-700: #92400e;
  --prim-amber-100: rgba(146,64,14,.07);
  --prim-amber-200: rgba(146,64,14,.20);

  /* Amber / Warning — vivid (badges, banners, alert icons: needs more range
     than the single muted shade above — was 8 raw hex values repeated
     ~20 times across badges/banners before this). amber-vivid-800 is
     identical to --prim-amber-700 above, reused rather than duplicated. */
  --prim-amber-vivid-50:  #fffbeb;
  --prim-amber-vivid-100: #fef3c7;
  --prim-amber-vivid-300: #fcd34d;
  --prim-amber-vivid-500: #f59e0b;
  --prim-amber-vivid-600: #d97706;
  --prim-amber-vivid-700: #b45309;
  /* RGB triplets for rgba() tints — same pattern as --tc-dung/pfl/aus/ern/bod */
  --prim-amber-vivid-500-rgb: 245,158,11;
  --prim-amber-vivid-700-rgb: 180,83,9;

  /* Zone-type badge colors (regulatory zone category, not activity type —
     same rgb-triplet pattern as --tc-dung/pfl/aus/ern/bod above) */
  --prim-zone-federal-rgb: 59,130,246;
  --prim-zone-state-rgb:   99,102,241;
  --prim-zone-nature-rgb:  34,197,94;
  --prim-zone-water-rgb:   14,165,233;

  /* Activity type colors (rgb triplets for rgba() use) */
  --prim-tc-dung:   37,99,235;
  --prim-tc-pfl:    180,83,9;
  --prim-tc-aus:    5,150,105;
  --prim-tc-ern:    234,88,12;
  --prim-tc-bod:    109,40,217;

  /* Radius scale */
  --prim-r-4:   4px;
  --prim-r-6:   6px;
  --prim-r-10:  10px;
  --prim-r-14:  14px;
  --prim-r-18:  18px;
  --prim-r-22:  22px;
  --prim-r-28:  28px;
  --prim-r-full:999px;

  /* Spacing scale (4px base) */
  --prim-sp-1: 4px;
  --prim-sp-2: 8px;
  --prim-sp-3: 12px;
  --prim-sp-4: 16px;
  --prim-sp-5: 20px;
  --prim-sp-6: 24px;
  --prim-sp-7: 28px;
  --prim-sp-8: 32px;
  --prim-sp-10:40px;
  --prim-sp-12:48px;

  /* Type scale */
  --prim-text-xs:  11px;
  --prim-text-sm:  13px;
  --prim-text-base:14px;
  --prim-text-md:  15px;
  --prim-text-lg:  16px;
  --prim-text-xl:  17px;
  --prim-text-2xl: 22px;
  --prim-text-3xl: 28px;
  --prim-text-4xl: 30px;

  /* Font weights */
  --prim-fw-normal:   400;
  --prim-fw-medium:   500;
  --prim-fw-semibold: 600;
  --prim-fw-bold:     700;
  --prim-fw-xbold:    800;
  --prim-fw-black:    900;

  /* Motion */
  --prim-ease:  cubic-bezier(.25,.46,.45,.94);
  --prim-fast:  140ms;
  --prim-mid:   240ms;
  --prim-slow:  380ms;
}

/* ══════════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS
   Purpose-driven aliases. Use these in component CSS.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Background ─────────────────────────────────────────────── */
  --bg:         var(--prim-neutral-50);
  --surface-1:  var(--prim-white);
  --surface-2:  var(--prim-neutral-100);
  --surface-3:  #e2ede6;
  --bg-glass:   rgba(242,247,244,.94);

  /* ── Brand colors ───────────────────────────────────────────── */
  --green:      var(--prim-green-700);
  --green-d:    var(--prim-green-800);
  --green-l:    var(--prim-green-500);
  --green-dim:  var(--prim-green-50);
  --green-glow: var(--prim-green-glow);

  /* ── Borders ────────────────────────────────────────────────── */
  --border:     var(--prim-green-100);
  --border-2:   var(--prim-green-200);

  /* ── Text ───────────────────────────────────────────────────── */
  --text:       var(--prim-neutral-950);
  --muted:      var(--prim-neutral-700);
  --faint:      var(--prim-neutral-400);

  /* ── Status: warning ────────────────────────────────────────── */
  --amber:        var(--prim-amber-700);
  --amber-bg:     var(--prim-amber-100);
  --amber-border: var(--prim-amber-200);
  /* Pale background for warning pills/banners — previously a dangling
     var(--amber-dim, #fef9c3) with no real definition, always falling
     through to the fallback. Now a real token. */
  --amber-dim:    var(--prim-amber-vivid-100);
  /* Vivid scale — badges, banners, alert icons (doesn't vary by theme,
     matches what was already hardcoded identically in both before this). */
  --amber-vivid-50:  var(--prim-amber-vivid-50);
  --amber-vivid-100: var(--prim-amber-vivid-100);
  --amber-vivid-300: var(--prim-amber-vivid-300);
  --amber-vivid-500: var(--prim-amber-vivid-500);
  --amber-vivid-600: var(--prim-amber-vivid-600);
  --amber-vivid-700: var(--prim-amber-vivid-700);
  --amber-vivid-800: var(--prim-amber-700);
  --amber-vivid-500-rgb: var(--prim-amber-vivid-500-rgb);
  --amber-vivid-700-rgb: var(--prim-amber-vivid-700-rgb);

  /* ── Zone-type badges ─────────────────────────────────────────── */
  --zone-federal-rgb: var(--prim-zone-federal-rgb);
  --zone-state-rgb:   var(--prim-zone-state-rgb);
  --zone-nature-rgb:  var(--prim-zone-nature-rgb);
  --zone-water-rgb:   var(--prim-zone-water-rgb);

  /* ── Status: danger ─────────────────────────────────────────── */
  --red:        var(--prim-red-700);
  --red-bg:     var(--prim-red-100);
  --red-border: var(--prim-red-200);
  --red-glow-lo:var(--prim-red-glow);
  --red-glow-hi:rgba(185,28,28,.85);
  /* Vivid variant — consume as rgba(var(--red-vivid-rgb), alpha), same
     pattern as --tc-dung/pfl/aus/ern/bod (rgba(var(--tc-x), alpha)). */
  --red-vivid-rgb: var(--prim-red-vivid-rgb);

  /* ── Activity type colors ───────────────────────────────────── */
  --tc-dung: var(--prim-tc-dung);
  --tc-pfl:  var(--prim-tc-pfl);
  --tc-aus:  var(--prim-tc-aus);
  --tc-ern:  var(--prim-tc-ern);
  --tc-bod:  var(--prim-tc-bod);

  /* ── Spacing aliases ────────────────────────────────────────── */
  --s1: var(--prim-sp-1);
  --s2: var(--prim-sp-2);
  --s3: var(--prim-sp-3);
  --s4: var(--prim-sp-4);
  --s5: var(--prim-sp-5);
  --s6: var(--prim-sp-6);
  --s7: var(--prim-sp-7);
  --s8: var(--prim-sp-8);
  --s10:var(--prim-sp-10);
  --s12:var(--prim-sp-12);

  /* ── Radii aliases ──────────────────────────────────────────── */
  --r-xs:   var(--prim-r-6);
  --r-sm:   var(--prim-r-10);
  --r-md:   var(--prim-r-14);
  --r-lg:   var(--prim-r-18);
  --r-xl:   var(--prim-r-22);
  --r-2xl:  var(--prim-r-28);
  --r-full: var(--prim-r-full);

  /* ── Elevation / Shadow ─────────────────────────────────────── */
  --sh-xs:      0 1px 3px rgba(0,0,0,.05);
  --sh-sm:      0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --sh-md:      0 6px 24px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  --sh-glow:    0 0 0 1px rgba(26,122,64,.22), 0 4px 20px rgba(26,122,64,.10);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease: var(--prim-ease);
  --fast: var(--prim-fast);
  --mid:  var(--prim-mid);
  --slow: var(--prim-slow);

  /* ── Scrim ──────────────────────────────────────────────────── */
  --scrim:        rgba(0,0,0,.40);
  --scrim-strong: rgba(0,0,0,.58);

  /* ── Type ───────────────────────────────────────────────────── */
  --text-xs:   var(--prim-text-xs);
  --text-sm:   var(--prim-text-sm);
  --text-base: var(--prim-text-base);
  --text-md:   var(--prim-text-md);
  --text-lg:   var(--prim-text-lg);
  --text-xl:   var(--prim-text-xl);
  --text-2xl:  var(--prim-text-2xl);
  --text-3xl:  var(--prim-text-3xl);
  --text-4xl:  var(--prim-text-4xl);

  /* ── Font weights ───────────────────────────────────────────── */
  --fw-normal:   var(--prim-fw-normal);
  --fw-medium:   var(--prim-fw-medium);
  --fw-semibold: var(--prim-fw-semibold);
  --fw-bold:     var(--prim-fw-bold);
  --fw-xbold:    var(--prim-fw-xbold);
  --fw-black:    var(--prim-fw-black);

  /* ── Layout ─────────────────────────────────────────────────── */
  --hdr-h:  56px;
  --bnav-h: 68px;
  --max-w:  1200px;
}

/* ══════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENT TOKENS
   Per-component tokens built from semantic layer.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Button hierarchy ───────────────────────────────────────────
     4 tiers, ascending → descending emphasis:
       Primary   — filled gradient, brand color. One per screen/section (primary-action guideline).
       Secondary — solid neutral surface + border. Equal visual weight, no color claim.
       Ghost     — tinted, low emphasis. Default tier for repeated/inline actions.
       Text      — no fill/border, lowest emphasis. Links, dismissive actions.
     Each tier gets a "danger" color swap (Ghost-Danger) for destructive actions —
     same shape/weight as Ghost, red instead of green, per destructive-emphasis
     guideline (separated by color, not by inventing a 5th tier).
     ─────────────────────────────────────────────────────────────── */

  /* ── Button: Primary ────────────────────────────────────────── */
  --btn-primary-bg:         var(--green);
  --btn-primary-bg-hover:   var(--green-d);
  --btn-primary-color:      #ffffff;
  --btn-primary-shadow:     0 4px 18px var(--green-glow), 0 1px 3px rgba(0,0,0,.12);
  --btn-primary-shadow-h:   0 6px 24px var(--green-glow), 0 2px 6px rgba(0,0,0,.12);

  /* ── Button: Secondary ──────────────────────────────────────── */
  --btn-secondary-bg:        var(--surface-3);
  --btn-secondary-bg-hover:  var(--surface-2);
  --btn-secondary-color:     var(--text);
  --btn-secondary-border:    var(--border-2);

  /* ── Button: Ghost (default low-emphasis tier) ────────────────── */
  --btn-ghost-bg:           var(--green-dim);
  --btn-ghost-bg-hover:     var(--prim-green-100);
  --btn-ghost-color:        var(--green);
  --btn-ghost-border:       var(--border);

  /* ── Button: Ghost-Danger (destructive actions) ───────────────── */
  --btn-danger-bg:          var(--red-bg);
  --btn-danger-bg-hover:    var(--prim-red-200);
  --btn-danger-color:       var(--red);
  --btn-danger-border:      var(--red-border);

  /* ── Button: Text (lowest emphasis, link-style) ───────────────── */
  --btn-txt-color:          var(--muted);
  --btn-txt-color-hover:    var(--green-d);

  /* ── Button: size scale — bare .btn = md, .btn-sm = sm ────────── */
  --btn-padding:      15px var(--s5);
  --btn-font-size:    var(--text-lg);
  --btn-font-weight:  var(--fw-bold);
  --btn-radius:       var(--r-lg);
  --btn-sm-padding:   11px var(--s4);
  --btn-sm-font-size: var(--text-sm);
  --btn-sm-radius:    var(--r-md);
  --btn-txt-size:     var(--text-sm);
  --btn-txt-weight:   var(--fw-medium);

  /* ── Card ───────────────────────────────────────────────────── */
  --card-bg:      var(--surface-1);
  --card-border:  var(--border);
  --card-radius:  var(--r-md);
  --card-shadow:  var(--sh-sm);
  --card-padding: var(--s5);

  /* ── Input / Form ───────────────────────────────────────────── */
  --input-bg:           var(--surface-1);
  --input-border:       var(--border-2);
  --input-border-focus: var(--green);
  --input-radius:       var(--r-sm);
  --input-h:            40px;
  --input-px:           var(--s3);
  --input-text:         var(--text);
  --input-placeholder:  var(--faint);
  --input-shadow-focus: var(--sh-glow);

  /* ── Badge ──────────────────────────────────────────────────── */
  --badge-radius:  var(--r-full);
  --badge-px:      var(--s2);
  --badge-py:      3px;
  --badge-text-sz: var(--text-xs);

  /* ── Nav ────────────────────────────────────────────────────── */
  --nav-bg:          var(--bg-glass);
  --nav-active-color:var(--green);
  --nav-muted-color: var(--muted);
  --nav-h:           var(--bnav-h);

  /* ── FAB ────────────────────────────────────────────────────── */
  --fab-bg:       var(--green);
  --fab-bg-rec:   var(--red);
  --fab-shadow:   0 4px 20px var(--green-glow), 0 2px 6px rgba(0,0,0,.15);
  --fab-shadow-h: 0 6px 30px var(--green-glow), 0 3px 8px rgba(0,0,0,.15);
  --fab-size:     56px;

  /* ── Auth (Google) ──────────────────────────────────────────── */
  --google-btn-bg:       #ffffff;
  --google-btn-hover-bg: #f1f3f4;
  --google-btn-border:   rgba(0,0,0,.12);
  /* Shadow now comes from the shared elevation scale (--sh-sm/--sh-md) —
     this used to invent its own one-off shadow, which is what made the
     Google button visually inconsistent with everything else. */

  /* ── Shadows shorthand (btn) ────────────────────────────────── */
  --sh-fab:       var(--fab-shadow);
  --sh-fab-hover: var(--fab-shadow-h);

  /* ── Auth screen ────────────────────────────────────────────── */
  --auth-card-max-w:     340px;
  --auth-card-padding:   24px 26px 26px;
  --auth-brand-size:     var(--text-3xl);
  --auth-brand-logo:     28px;
  --auth-tagline-size:   var(--text-xl);
  --auth-tagline-weight: var(--fw-bold);
  --auth-left-h1-size:   clamp(var(--text-2xl),2vw,var(--text-4xl));
  --auth-left-h1-weight: var(--fw-xbold);
  --auth-left-sub-size:  var(--text-base);
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE  — manual opt-in via data-theme="dark" (app.js applyTheme())
   Override semantic tokens only — component tokens inherit.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:         #060f09;
  --surface-1:  #0d1f13;
  --surface-2:  #112619;
  --surface-3:  #163020;
  --border:     rgba(55,185,107,.13);
  --border-2:   rgba(55,185,107,.28);
  --bg-glass:   rgba(6,15,9,.88);

  --green:      #37b96b;
  --green-d:    #2a9354;
  --green-l:    #5fd08a;
  --green-dim:  rgba(55,185,107,.10);
  --green-glow: rgba(55,185,107,.22);

  --text:       #dff0e5;
  --muted:      #6b9478;
  --faint:      #3a5944;

  --amber:        #f59e0b;
  --amber-bg:     rgba(245,158,11,.10);
  --amber-border: rgba(245,158,11,.25);
  --red:        #f87171;
  --red-bg:     rgba(248,113,113,.10);
  --red-border: rgba(248,113,113,.28);

  --tc-dung: 59,130,246;
  --tc-pfl:  245,158,11;
  --tc-aus:  16,185,129;
  --tc-ern:  249,115,22;
  --tc-bod:  167,139,250;

  --sh-xs:   0 1px 2px rgba(0,0,0,.50);
  --sh-sm:   0 2px 10px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.40);
  --sh-md:   0 6px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
  --sh-glow: 0 0 0 1px rgba(55,185,107,.25), 0 4px 20px rgba(55,185,107,.12);
  --sh-btn:       0 4px 18px var(--green-glow), 0 1px 3px rgba(0,0,0,.35);
  --sh-btn-hover: 0 6px 24px var(--green-glow), 0 2px 6px rgba(0,0,0,.35);
  --sh-fab:       0 4px 20px var(--green-glow), 0 2px 6px rgba(0,0,0,.40);
  --sh-fab-hover: 0 6px 30px var(--green-glow), 0 3px 8px rgba(0,0,0,.40);

  --scrim:        rgba(0,0,0,.58);
  --scrim-strong: rgba(0,0,0,.72);

  --btn-primary-color: #f0fdf4;
  --red-glow-lo: rgba(248,113,113,.40);
  --red-glow-hi: rgba(248,113,113,.85);

  --google-btn-bg:       #1e2d24;
  --google-btn-hover-bg: #253320;
  --google-btn-border:   rgba(255,255,255,.10);
}