/* ============================================================
   Farmers Imports — Design tokens
   Single source of truth. Never hardcode a value that lives here.
   Reference: design-system.md §11
   ============================================================ */

:root {
  /* ── CORE PALETTE ───────────────────────────────── */
  --fi-verde-oscuro:  #1C4235;
  --fi-verde-medio:   #3D7A4A;
  --fi-lima:          #72B84A;
  --fi-blanco-calido: #F9F6F0;

  /* ── SUPPORT ────────────────────────────────────── */
  --fi-teal:          #2B7E86;
  --fi-teal-oscuro:   #1A4F57;
  --fi-sage:          #C0CEBC;

  /* ── ACTION — CTAs ONLY ─────────────────────────── */
  --fi-naranja:       #C96030;
  --fi-naranja-hover: #b5532a;

  /* Short aliases */
  --vo: var(--fi-verde-oscuro);
  --vm: var(--fi-verde-medio);
  --li: var(--fi-lima);
  --tl: var(--fi-teal);
  --to: var(--fi-teal-oscuro);
  --sg: var(--fi-sage);
  --na: var(--fi-naranja);
  --bl: var(--fi-blanco-calido);

  /* ── TEXT ───────────────────────────────────────── */
  --fg-1:         var(--fi-verde-oscuro);
  --fg-2:         #3a3a3a;
  --fg-3:         #4d524f;
  --fg-mute:      #6b6f6c;
  --fg-faint:     #888;
  --fg-on-dark-1: var(--fi-blanco-calido);
  --fg-on-dark-2: rgba(249, 246, 240, .75);
  --fg-on-dark-3: rgba(249, 246, 240, .45);

  /* ── SURFACES ───────────────────────────────────── */
  --bg-base: var(--fi-blanco-calido);
  --bg-card: #ffffff;
  --bg-tint: #f0f5f2;
  --bg-sage: var(--fi-sage);
  --bg-dark: var(--fi-verde-oscuro);
  --bg-teal: var(--fi-teal-oscuro);
  --halo:    rgba(114, 184, 74, .14);

  /* ── HAIRLINES (.5px, never 1px) ────────────────── */
  --line-1:      rgba(28, 66, 53, .10);
  --line-2:      rgba(28, 66, 53, .20);
  --line-3:      rgba(28, 66, 53, .30);
  --line-dark-1: rgba(249, 246, 240, .12);
  --line-dark-2: rgba(249, 246, 240, .22);

  /* ── CATEGORY (only semantic color) ─────────────── */
  --accent-frozen: var(--fi-teal);
  --accent-fresh:  var(--fi-verde-medio);

  /* ── TYPOGRAPHY ─────────────────────────────────── */
  /* Two faces only. The monospace (DM Mono) was removed by client decision
     on 2026-10-12: its labels now use --fb at 600 with open tracking. No
     --fm token on purpose — a stray var(--fm) would resolve to nothing and
     inherit the parent face rather than bring a monospace back. */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --fd: var(--font-display);
  --fb: var(--font-body);

  /* ── RADII ──────────────────────────────────────── */
  --r-pill:    999px;
  --r-card-s:  14px;
  --r-card-m:  16px;
  --r-card-l:  18px;
  --r-card-xl: 22px;
  --r-card-xxl: 34px;
  --r-icon:    10px;
  --r-icon-l:  12px;

  /* Asymmetric — the brand signature. Max twice per screen. */
  --r-blob-xs: 8px  8px  8px  36px;
  --r-blob-sm: 12px 12px 12px 56px;
  --r-blob-md: 14px 14px 14px 80px;
  --r-blob-lg: 20px 20px 20px 110px;

  --r-corner-bl: 0 0 0 88px;
  --r-corner-br: 0 0 88px 0;
  --r-corner-tl: 88px 0 0 0;
  --r-corner-tr: 0 88px 0 0;

  --r-stage:    32px 32px 32px 140px;
  --r-stage-md: 28px 28px 28px 100px;
  --r-stage-sm: 22px 22px 22px 60px;
  --r-cap:      60px 60px 0 0;
  --r-cap-sm:   32px 32px 0 0;

  /* ── SHADOWS (green-tinted, never pure black) ───── */
  --sh-header: 0 4px  24px rgba(28, 66, 53, .08);
  --sh-card:   0 8px  32px rgba(28, 66, 53, .08);
  --sh-lift:   0 16px 48px rgba(28, 66, 53, .09);

  /* ── MOTION ─────────────────────────────────────── */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --d-fast:   180ms;
  --d-base:   280ms;
  --d-slow:   380ms;
  --d-panel:  500ms;
  /* Header transparent→solid. Material/iOS easing, deliberately slower than
     --d-base so the change reads as a state, not a flicker. */
  --d-nav:    340ms;
  --ease-nav: cubic-bezier(.4, 0, .2, 1);

  /* ── LAYOUT ─────────────────────────────────────── */
  --wrap:   1240px;
  --wrap-l: 1380px;
  --wrap-s: 1020px;
  --pad-x:  40px;
}

@media (max-width: 720px) {
  :root {
    --pad-x:   18px;
    --r-stage: var(--r-stage-sm);
    --r-cap:   var(--r-cap-sm);
  }
}