/* ══════════════════════════════════════════════════════════════════
   Wildlife Connects — Marketing Site & CRM Design System
   Colors, type, and core tokens.

   Scope: public-facing surfaces (wildlifeconnects.com) and internal
   CRM/marketing tooling. NOT for the customer product UI ("master
   system") — that surface uses the same tokens but no paper-craft.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Brand fonts (self-hosted) ────────────────────────────────────
   Inter for body / UI · InterDisplay for display + H1 (large sizes).
   JetBrains Mono is loaded from Google Fonts as a fallback — no
   licensed copy was provided. Drop ttf/woff2 into fonts/ and add
   matching @font-face if you want to self-host it too.
   ──────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 400; font-display: swap;
  src: url('../fonts/Inter-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 400; font-display: swap;
  src: url('../fonts/Inter-Italic.ttf')   format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 500; font-display: swap;
  src: url('../fonts/Inter-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 600; font-display: swap;
  src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal;  font-weight: 700; font-display: swap;
  src: url('../fonts/Inter-Bold.ttf')     format('truetype'); }

@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/InterDisplay-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/InterDisplay-Bold.ttf')     format('truetype'); }

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── COLOR · Forest family ──────────────────────────────────── */
  --wc-forest-dark:  #1E302A;   /* sidebar, hero, dark sections    */
  --wc-forest:       #2D5A30;   /* primary brand, headings, borders*/
  --wc-forest-light: #4A7C5E;   /* hover, secondary                */
  --wc-forest-mist:  #E8F0EA;   /* soft success, badges            */
  --wc-forest-pale:  #F4F8F5;   /* table rows, subtle bg           */
  --wc-teal:         #3D6B5E;   /* secondary, data viz             */

  /* ─── COLOR · Amber, cream & neutrals ────────────────────────── */
  --wc-amber:        #C4722A;   /* primary CTA, accent             */
  --wc-amber-light:  #D98B47;   /* amber hover                     */
  --wc-amber-pale:   #FBF0E6;   /* alerts, soft accent bg          */
  --wc-cream:        #F5F0E8;   /* page background, surfaces       */
  --wc-stone:        #8C7B6B;   /* muted text, labels              */
  --wc-charcoal:     #2A2A2A;   /* primary body text               */
  --wc-paper:        #FFFFFF;   /* card surface                    */

  /* ─── COLOR · Status (sparingly) ─────────────────────────────── */
  --wc-destructive:  #B84040;   /* delete/remove only              */
  --wc-warning:      #C4722A;   /* same as amber                   */
  --wc-success:      #4A7C5E;   /* same as forest light            */

  /* ─── COLOR · WC Field sub-brand (booths/events ONLY) ────────── */
  /* Do NOT use on marketing site or product UI. */
  --wcf-dark:        #0D1A0D;
  --wcf-forest:      #1C3B1C;
  --wcf-mid:         #2E5E2E;
  --wcf-light:       #6B9E6B;
  --wcf-orange:      #C8752A;
  --wcf-gold:        #C8A830;

  /* ─── SEMANTIC color tokens ──────────────────────────────────── */
  --bg:              var(--wc-cream);
  --bg-elevated:     var(--wc-paper);
  --bg-subtle:       var(--wc-forest-pale);
  --bg-dark:         var(--wc-forest-dark);

  --fg:              var(--wc-charcoal);
  --fg-muted:        var(--wc-stone);
  --fg-on-dark:      var(--wc-cream);
  --fg-brand:        var(--wc-forest);
  --fg-accent:       var(--wc-amber);

  --border:          #D8E0DA;          /* 1px hairline */
  --border-strong:   var(--wc-forest);
  --divider:         var(--wc-forest-mist);

  /* ─── TYPE · Families ─────────────────────────────────────────── */
  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:    'InterDisplay', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── TYPE · Scale (marketing-site specific) ──────────────────── */
  /* Lead with WEIGHT, not size. */
  --fs-display:      72px;  --lh-display:  64px;  /* hero, t-shirt sizes vary */
  --fs-h1:           48px;  --lh-h1:       56px;
  --fs-h2:           36px;  --lh-h2:       44px;
  --fs-h3:           24px;  --lh-h3:       32px;
  --fs-body:         17px;  --lh-body:     27px;
  --fs-small:        14px;  --lh-small:    22px;
  --fs-eyebrow:      12px;  --lh-eyebrow:  18px;

  /* CRM / app surfaces — slightly tighter than marketing */
  --fs-app-h1:       28px;  --lh-app-h1:   36px;
  --fs-app-h2:       20px;  --lh-app-h2:   28px;
  --fs-app-h3:       16px;  --lh-app-h3:   24px;
  --fs-app-body:     14px;  --lh-app-body: 22px;
  --fs-app-caption:  12px;  --lh-app-caption: 16px;

  /* ─── TYPE · Weights ──────────────────────────────────────────── */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* ─── TYPE · Tracking ─────────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-eyebrow:0.08em;     /* marketing eyebrows */
  --tracking-caption:0.14em;     /* app captions */

  /* ─── SPACING · 4px base ──────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ─── LAYOUT ──────────────────────────────────────────────────── */
  --max-content:        1280px;
  --section-pad-y:      80px;
  --section-pad-y-sm:   40px;
  --gutter:             24px;

  /* ─── RADII ───────────────────────────────────────────────────── */
  --r-input:   4px;
  --r-card:    8px;
  --r-feature: 12px;
  --r-pill:    20px;
  --r-full:    9999px;   /* avatars only */

  /* ─── BORDERS ─────────────────────────────────────────────────── */
  --bw-hair:     1px;
  --bw-strong:   1.5px;
  --bw-accent:   3px;    /* card top accent bar */

  /* ─── SHADOWS · warm-tinted, never pure black ─────────────────── */
  /* Drop shadows: 12–18% opacity, 4–8px blur, warm-tinted. */
  --shadow-paper-sm: 0 1px 2px rgba(60, 40, 20, 0.08),
                     0 2px 4px rgba(60, 40, 20, 0.06);
  --shadow-paper:    0 4px 8px rgba(60, 40, 20, 0.12),
                     0 2px 4px rgba(60, 40, 20, 0.08);
  --shadow-paper-lg: 0 8px 16px rgba(60, 40, 20, 0.14),
                     0 4px 8px rgba(60, 40, 20, 0.10);
  --shadow-overlay:  0 12px 32px rgba(30, 48, 42, 0.18);

  /* ─── MOTION · slow & considered ──────────────────────────────── */
  --motion-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base:   220ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES
   Use these classes for marketing surfaces. App surfaces should use
   the .app-* counterparts below.
   ══════════════════════════════════════════════════════════════════ */

.wc-display {
  font: var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  text-wrap: balance;
}

.wc-h1 {
  font: var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  text-wrap: balance;
}

.wc-h2 {
  font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-sans);
  color: var(--fg-brand);
  text-wrap: balance;
}

.wc-h3 {
  font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans);
  color: var(--fg);
}

.wc-body {
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--fg);
  text-wrap: pretty;
}

.wc-small {
  font: var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-sans);
  color: var(--fg-muted);
}

.wc-eyebrow {
  font: var(--fw-semibold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* ─── App/CRM type ──────────────────────────────────────────────── */
.app-h1   { font: var(--fw-bold) var(--fs-app-h1)/var(--lh-app-h1) var(--font-sans); color: var(--fg-brand); }
.app-h2   { font: var(--fw-semibold) var(--fs-app-h2)/var(--lh-app-h2) var(--font-sans); color: var(--fg-brand); }
.app-h3   { font: var(--fw-semibold) var(--fs-app-h3)/var(--lh-app-h3) var(--font-sans); color: var(--fg); }
.app-body { font: var(--fw-regular) var(--fs-app-body)/var(--lh-app-body) var(--font-sans); color: var(--fg); }
.app-caption {
  font: var(--fw-medium) var(--fs-app-caption)/var(--lh-app-caption) var(--font-sans);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.app-mono {
  font: var(--fw-regular) 13px/20px var(--font-mono);
  color: var(--fg);
}

/* ══════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--fg-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wc-forest-light); }

::selection { background: var(--wc-amber-pale); color: var(--wc-forest-dark); }