/* ============================================================
   BEE SMART POLLINATORS — Design Tokens  ·  v2 "Meadow & Sky"
   Soft but bold, tiny but powerful.
   Soft cool grounds + vibrant blues and greens across many
   shades and vibrancies. Import this file first.
   Fonts: Archivo + Hanken Grotesk + IBM Plex Mono are ALL self-hosted
   from /fonts. Fully offline-capable — no CDN dependency.
   Import this file first.
   ============================================================ */

/* Archivo — self-hosted variable font (uploaded brand files) */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* Hanken Grotesk — self-hosted variable font (uploaded brand files) */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* IBM Plex Mono — self-hosted (all uploaded weights wired; design uses 400/500/600) */
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---------- TYPE FAMILIES ----------
     Brand faces load from Google Fonts (CDN, top of file). Each falls back
     to a full NATIVE stack so the system stays on-brand offline / on slow
     networks and renders in each OS's own font (Mac/iOS · Windows · Android · Linux).
     Pairing: Archivo for HEADLINES & big stuff (block caps); Hanken Grotesk for UI + body.
     IBM Plex Mono is kept ONLY for tiny data labels / the eyebrow kicker. */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;       /* headlines, big numerals */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; /* UI + body */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* data, IDs, coords, readings */

  /* ---------- BRAND COLOR — AZURE (blue) ---------- */
  /* Hero accent. Vivid, confident sky-blue. */
  --azure-50:  #EAF2FD;
  --azure-100: #CFE2FB;
  --azure-200: #A6C8F6;
  --azure-300: #6FA6EF;
  --azure-400: #3D82E6;
  --azure-500: #1F6FE0;   /* PRIMARY */
  --azure-600: #1657BE;
  --azure-700: #14479B;
  --azure-800: #143A73;
  --azure-900: #112A4F;

  /* ---------- BRAND COLOR — LEAF (green) ---------- */
  /* Co-primary. Vivid living green. */
  --leaf-50:  #E7F6EC;
  --leaf-100: #C7EBD3;
  --leaf-200: #98DBAF;
  --leaf-300: #5FC588;
  --leaf-400: #2FA968;
  --leaf-500: #1B8E54;   /* SECONDARY */
  --leaf-600: #157045;
  --leaf-700: #135C3A;
  --leaf-800: #11472E;
  --leaf-900: #0D3322;

  /* ---------- VIVID POPS ---------- */
  /* The "bold" — saturated bridges between blue and green. */
  --vivid-blue:  #1F6FE0;
  --vivid-cyan:  #15B5DE;   /* bright sky / water */
  --vivid-teal:  #0FA89A;   /* blue-green bridge */
  --vivid-green: #1B8E54;
  --vivid-lime:  #46C97B;   /* fresh mint-lime */
  --indigo-ink:  #0E1C33;   /* deepest blue, near-black */

  /* ---------- COMPLEMENTARY ACCENTS — GOLD & WHITE ----------
     The brand's two complements, drawn from the cobalt logo badge's
     gold + white keyline. Use sparingly: logo lockups, keylines, seals,
     "Bigger, Better Fruit" mark, warm/clean highlights. Not UI action colors. */
  --gold-soft: #F1E4B8;
  --gold:      #C49A22;
  --gold-deep: #8F6E14;
  --paper-white: #FFFFFF;   /* the white complement — keylines, reversed marks */

  /* ---------- COOL NEUTRALS — MIST → SLATE ---------- */
  /* Soft near-white at the top, deep slate ink at the bottom. */
  --mist-50:  #F6F8FB;   /* page background */
  --mist-100: #EDF1F6;
  --mist-200: #DDE4EE;
  --mist-300: #C4D0DE;
  --mist-400: #9DAEC2;
  --mist-500: #6E8298;
  --mist-600: #51647A;
  --mist-700: #3A4B5E;
  --mist-800: #25323F;   /* ink */
  --mist-900: #16202B;   /* darkest slate */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:           var(--mist-50);    /* default page */
  --bg-raised:    #FFFFFF;           /* cards */
  --bg-sunken:    var(--mist-100);   /* wells, insets */
  --bg-inverse:   var(--mist-900);   /* dark sections */

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1: var(--mist-900);            /* primary ink */
  --fg2: var(--mist-700);            /* secondary */
  --fg3: var(--mist-500);            /* muted / captions */
  --fg-on-accent: #FFFFFF;           /* text on azure/leaf fills */
  --fg-on-dark:  var(--mist-50);     /* text on dark slate */
  --fg-inverse-2: #A7B6C8;           /* secondary text on dark */

  /* ---------- BORDERS / LINES ---------- */
  --line:        #DDE4EE;            /* hairline */
  --line-strong: #C4D0DE;
  --line-dark:   rgba(255,255,255,0.12);

  /* ---------- BRAND ALIASES ---------- */
  --accent:        var(--azure-500);
  --accent-hover:  var(--azure-600);
  --accent-press:  var(--azure-700);
  --accent-soft:   var(--azure-100);
  --secondary:     var(--leaf-500);
  --secondary-soft:var(--leaf-100);

  /* ---------- STATUS / SEMANTIC ---------- */
  --success:     #1B8E54;  --success-soft: #D6F0E0;  --success-fg: #11472E;
  --warning:     #E0A019;  --warning-soft: #FBEDCB;  --warning-fg: #7A5610;
  --danger:      #E0533D;  --danger-soft:  #FBDDD7;  --danger-fg:  #8A2C1B;
  --info:        #15B5DE;  --info-soft:    #D4F1F8;  --info-fg:    #0B5468;

  /* Hive-health states (domain-specific) */
  --health-thriving: #1B8E54;  /* strong colony   */
  --health-steady:   #1F6FE0;  /* monitor / ok    */
  --health-weak:     #E0533D;  /* needs attention */
  --health-dormant:  #6E8298;  /* winter / inactive */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --hex-clip: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);

  /* ---------- SHADOWS / ELEVATION ---------- */
  /* Cool slate-tinted shadows (never warm brown). */
  --shadow-xs: 0 1px 2px rgba(18,32,43,0.06);
  --shadow-sm: 0 1px 2px rgba(18,32,43,0.06), 0 2px 6px rgba(18,32,43,0.05);
  --shadow-md: 0 2px 4px rgba(18,32,43,0.06), 0 8px 20px rgba(18,32,43,0.09);
  --shadow-lg: 0 4px 8px rgba(18,32,43,0.08), 0 18px 40px rgba(18,32,43,0.14);
  --shadow-accent: 0 6px 18px rgba(31,111,224,0.30);
  --inset-well: inset 0 1px 2px rgba(18,32,43,0.08);

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE SCALE
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fg1);
  text-wrap: balance;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg1);
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--fg1);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--fg2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg2);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fg2);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--fg1);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg3);
}
.t-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.t-metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}