/* ================================================================
   FROBELLA EXPORT — DESIGN TOKENS (variables.css)
   Load order: variables.css -> style.css -> animations.css -> responsive.css
   This file must load FIRST: every other stylesheet consumes these
   custom properties. Centralizing tokens here means the entire
   visual identity (palette, type scale, spacing, motion) can be
   re-themed by editing a single file.
================================================================ */

:root {

  /* ------------------------------------------------------------
     1. COLOR PALETTE
     Brand system: deep botanical greens (trust, agriculture),
     amber accent (crate-stamp / harvest signature), berry red
     (fruit accent, used sparingly), warm off-white paper base.
  ------------------------------------------------------------ */
  --color-green-950: #12271C;   /* darkest — header/footer bg, deep contrast text */
  --color-green-800: #1F3D2E;   /* primary brand green */
  --color-green-700: #2A4F3B;   /* mid-dark, used for hover states */
  --color-green-600: #3E6B4F;   /* mid green — icons, bars, secondary accents */

  --color-sage-200:  #DCE6DF;   /* light sage — soft section backgrounds */
  --color-sage-300:  #A9C2AE;   /* mid sage — decorative fills, borders on dark bg */

  --color-paper:      #F6F5EF;  /* main page background (warm off-white, not pure cream) */
  --color-paper-2:    #EFEEE6;  /* secondary section background */

  --color-ink:        #16221B;  /* body text */
  --color-ink-strong: #12271C;  /* headings */
  --color-ink-soft:   #4B5850;  /* secondary / muted text */

  --color-amber:      #D9922E;  /* accent — crate stamp, CTAs on dark bg */
  --color-amber-dark: #B5741C;  /* accent hover / eyebrow labels */

  --color-berry:      #9E2B3B;  /* secondary accent — berry fruit references */

  --color-line:       #D8D6C9; /* borders, hairline dividers */

  --color-success:    #2E7D32;
  --color-error:      #D32F2F;

  /* ------------------------------------------------------------
     2. TYPOGRAPHY
  ------------------------------------------------------------ */
  --font-display: 'Fraunces', Georgia, serif;          /* headings — elegant serif */
  --font-body:    'Public Sans', -apple-system, sans-serif; /* body copy — modern sans */
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace; /* labels, stamps, data */

  --fs-h1: clamp(38px, 5.4vw, 64px);
  --fs-h2: clamp(28px, 3.4vw, 42px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 13.5px;

  --lh-heading: 1.15;
  --lh-body: 1.6;

  /* ------------------------------------------------------------
     3. SPACING SCALE (base 4px)
  ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --section-padding-y: 96px;   /* overridden to 56-72px on smaller screens in responsive.css */
  --container-max: 1280px;

  /* ------------------------------------------------------------
     4. RADIUS
  ------------------------------------------------------------ */
  --radius-s: 6px;    /* inputs, badges, small buttons */
  --radius-m: 14px;   /* cards */
  --radius-l: 28px;   /* hero blocks, large rounded panels */

  /* ------------------------------------------------------------
     5. SHADOWS
  ------------------------------------------------------------ */
  --shadow-s: 0 1px 3px rgba(18, 39, 28, 0.08);
  --shadow-m: 0 12px 32px rgba(18, 39, 28, 0.12);
  --shadow-l: 0 24px 64px rgba(18, 39, 28, 0.18);

  /* ------------------------------------------------------------
     6. TRANSITIONS / MOTION
  ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --transition-fast: 200ms var(--ease-standard);
  --transition-med:  300ms var(--ease-standard);
  --transition-slow: 450ms var(--ease-standard);

  /* ------------------------------------------------------------
     7. Z-INDEX SCALE (kept centralized to avoid stacking conflicts)
  ------------------------------------------------------------ */
  --z-header: 150;
  --z-mobile-nav: 250;
  --z-cookie: 200;
  --z-float: 180;
  --z-lightbox: 300;
  --z-skip-link: 999;
}

/* ------------------------------------------------------------
   DARK MODE TOKENS (optional, opt-in via [data-theme="dark"] on <html>)
   Not activated by default — B2B export audiences typically browse
   in light mode — but the token structure supports it without a
   redesign, per the design system specification.
------------------------------------------------------------ */
[data-theme="dark"] {
  --color-paper: #101613;
  --color-paper-2: #172019;
  --color-ink: #F4F6F5;
  --color-ink-strong: #FFFFFF;
  --color-ink-soft: #B7C2BC;
  --color-line: #2A362F;
  --color-green-800: #2E5B44;
  --color-amber: #E3A24A;
}