/* ============================================================================
   gd-tokens.css — design vocabulary for grow-dammit.com
   ============================================================================
   Values extracted from the maps site (the source of truth for the brand
   aesthetic). Imported by every page on every site.

   Used by:
     • www.grow-dammit.com         (main / hub)
     • maps.grow-dammit.com        (planting maps)
     • data.grow-dammit.com        (nav-only — dashboard keeps its own tokens
                                    for body content; uses these for the nav)

   This file defines variables only. No rules. Rules live in
   gd-components.css and per-site stylesheets.

   ----------------------------------------------------------------------------
   Naming convention
   ----------------------------------------------------------------------------
   --gd-{category}-{role}-{variant}

   Categories: color, font, text (size), space, radius, shadow, border, bp.

   Roles capture intent ("body", "muted", "strong") rather than the raw
   value, so a value can change without renaming consumers.
   ============================================================================ */

:root {
  /* ── COLOR ────────────────────────────────────────────────────────────── */

  /* Greens — the brand */
  --gd-color-green-dark:   #315B28;   /* primary chrome (nav, headers)      */
  --gd-color-green-mid:    #5C9246;   /* accents, markers, active indicator */
  --gd-color-green-soft:   rgba(92, 146, 70, 0.10);  /* tint, hover surface */

  /* Navy — body text + strong borders */
  --gd-color-navy:         #08192D;
  --gd-color-navy-soft:    rgba(8, 25, 45, 0.10);    /* dividers          */
  --gd-color-navy-medium:  rgba(8, 25, 45, 0.25);    /* secondary borders */

  /* Neutrals */
  --gd-color-cream:        #f8f5ef;   /* page background                    */
  --gd-color-warm-white:   #fdfcfa;   /* surface (cards, sidebar)           */
  --gd-color-white:        #ffffff;   /* tooltip, modal interior            */

  /* Text */
  --gd-color-text:         #08192D;   /* body — same as navy                */
  --gd-color-text-mid:     #3a4a3a;   /* secondary                          */
  --gd-color-text-muted:   #6a7a6a;   /* tertiary, labels, timestamps       */

  /* State */
  --gd-color-inactive:     #D9D9D9;   /* dead/disabled fill                 */
  --gd-color-inactive-ink: #aaaaaa;   /* dead/disabled stroke               */

  /* ── FONT FAMILIES ────────────────────────────────────────────────────── */
  --gd-font-serif:  'Playfair Display', Georgia, serif;
  --gd-font-sans:   'Source Sans 3', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Roboto, sans-serif;

  /* ── TYPE SCALE ───────────────────────────────────────────────────────── */
  /* Use rem so the user's browser size preference is respected.
     Base 1rem = 16px. */
  --gd-text-xs:     0.72rem;   /* 11.5px — uppercase labels, micro-meta    */
  --gd-text-sm:     0.82rem;   /* 13px   — secondary UI, captions          */
  --gd-text-base:   0.95rem;   /* 15px   — body, default UI                */
  --gd-text-lg:     1.05rem;   /* 17px   — page titles in chrome           */
  --gd-text-xl:     1.25rem;   /* 20px   — header h1                       */
  --gd-text-2xl:    1.6rem;    /* 26px   — section headings                */
  --gd-text-3xl:    2.2rem;    /* 35px   — hero                            */

  /* ── SPACING ──────────────────────────────────────────────────────────── */
  /* 4-step scale. Multiples of 4px keep everything on a grid. */
  --gd-space-1:     4px;
  --gd-space-2:     8px;
  --gd-space-3:     12px;
  --gd-space-4:     16px;
  --gd-space-5:     20px;
  --gd-space-6:     24px;
  --gd-space-8:     32px;
  --gd-space-12:    48px;
  --gd-space-16:    64px;

  /* ── BORDERS & RADII ──────────────────────────────────────────────────── */
  --gd-radius-sm:   2px;
  --gd-radius:      4px;     /* default */
  --gd-radius-md:   6px;     /* modals, larger surfaces */
  --gd-radius-lg:   8px;

  --gd-border-thin:    1px;
  --gd-border-strong:  1.5px;

  /* ── SHADOWS ──────────────────────────────────────────────────────────── */
  --gd-shadow-chrome:  0 2px 12px rgba(0, 0, 0, 0.25);  /* nav, sticky bars */
  --gd-shadow-card:    0 2px  8px rgba(0, 0, 0, 0.08);  /* info-box        */
  --gd-shadow-float:   0 8px 24px rgba(0, 0, 0, 0.15);  /* tooltip, modal  */

  /* ── BREAKPOINTS (reference only — JS may read these) ─────────────────── */
  /* @media queries must hardcode pixel values; these are for documentation
     and any JS that wants to mirror the breakpoint logic. */
  --gd-bp-tablet:   720px;    /* below = mobile          */
  --gd-bp-desktop:  1100px;   /* below = tablet          */
}