/* Figtree website stylesheet.
   Tokens copied from the Figtree Design System (colors_and_type.css). Brand font: Figtree (Round 166, Oct 2026),
   self-hosted from /fonts as one variable file (weights 300 Light / 400 Regular / 500 Medium used), SIL Open Font License
   (fonts/Figtree-OFL.txt). The Circular Std files stay in /fonts but are no longer loaded. */
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-Variable.ttf') format('truetype'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- BRAND / CORE ---------- */
  --ink:            #212121; /* rgb(33,33,33)  — primary text, strokes */
  --ink-warm:       #191816; /* rgb(25,24,22)  — headings + shadow base */
  --white:          #FFFFFF;
  --orange:         #F15A24; /* rgb(241,90,36) — PRIMARY brand / actions */
  --amber:          #FBB03B; /* rgb(251,176,59)— secondary / data accent */

  /* ---------- SURFACES ---------- */
  --canvas:         #FEF8F6; /* rgb(254,248,246) warm off-white page bg */
  /* Page background is canvas + a 4% orange→amber wash over white: */
  --canvas-wash:    linear-gradient(rgba(251,176,59,0.04) 0%, rgba(241,90,36,0.04) 100%), #FFFFFF; /* @kind color */
  --surface:        #FFFFFF;            /* solid cards            */
  --surface-glass:  rgba(255,255,255,0.55); /* translucent widgets */

  /* ---------- ORANGE / AMBER TINTS ---------- */
  --orange-700:     #C9421A;
  --orange-300:     #F8AB90; /* rgb(248,171,144) */
  --orange-200:     #FBD4C7; /* rgb(251,212,199) */
  --orange-100:     #FFD9C0; /* rgb(255,217,192) */
  --orange-050:     #FEF8F6;
  --amber-200:      #FDD79C; /* rgb(253,215,156) */
  --amber-a50:      rgba(251,176,59,0.5);

  /* ---------- NEUTRAL GRAYS ---------- */
  --gray-900:       #212121;
  --gray-500:       #8B8B8A; /* rgb(139,139,138) muted text */
  --gray-450:       #908F8D; /* rgb(144,143,141) */
  --gray-400:       #B8B3AC; /* rgb(184,179,172) selected-state borders */
  --gray-300:       #CCCAC8; /* rgb(204,202,200) borders */
  --gray-200:       #D9D9D9; /* rgb(217,217,217) dividers/fills */
  /* alpha-ink utility fills used throughout the app: */
  --ink-05:         rgba(33,33,33,0.05);  /* pill / chip backgrounds */
  --ink-10:         rgba(33,33,33,0.10);
  --ink-15:         rgba(33,33,33,0.15);
  --ink-50:         rgba(33,33,33,0.50);  /* placeholder / secondary */
  --warm-50:        rgba(25,24,22,0.50);  /* secondary heading text */

  /* ---------- SEMANTIC ---------- */
  --success:        #3C960F; /* rgb(60,150,15)  positive / up */
  --success-bg:     #ECF6E4;
  --error:          #F12424; /* rgb(241,36,36)  negative / down / alerts */
  --error-bg:       #FDE5E5;
  --error-border:   #F0C4BB;
  --warning:        #FBB03B; /* amber */

  /* ---------- DATA-VIZ SCALE (charts, map overlays) ---------- */
  --dv-orange:      #F15A24;
  --dv-amber:       #FBB03B;
  --dv-orange-soft: #F8AB90;
  --dv-gray:        #908F8D;
  --dv-ink:         #4A4A4A;
  --dv-green:       #3C960F;
  --dv-green-dark:  #004209; /* rgb(0,66,9) */
  --dv-green-light: #ACDD6B; /* rgb(172,221,107) */
  --dv-green-mid:   #5C8736; /* rgb(92,135,54) */
  --dv-purple:      #35005B; /* rgb(53,0,91)  Figtree Purple (dark) */
  --dv-purple-dark: #35005B; /* rgb(53,0,91) */
  --dv-purple-light:#C778FF; /* rgb(199,120,255) Figtree Lavender */
  --violet:         #6E00AF; /* rgb(110,0,175) Figtree Violet — AI assistant */
  --violet-050:     #F1ECFA;

  /* ---------- ELEVATION ---------- */
  --shadow-card:    0 0 10px 5px rgba(25,24,22,0.05);   /* default widget */
  --shadow-card-lg: 0 0 20px 10px rgba(25,24,22,0.05);  /* login / modal */
  --shadow-pop:     0 4px 24px rgba(25,24,22,0.12);     /* popovers/menus */
  --shadow-pill:    0 1px 2px 0 rgba(0,0,0,0.15);       /* toggle thumb */

  /* ---------- RADII ---------- */
  --r-chip:   5px;   /* filter pills / dropdown triggers */
  --r-input:  10px;  /* text fields */
  --r-btn:    10px;
  --r-card:   20px;  /* widgets / cards */
  --r-modal:  25px;
  --r-pill:   999px; /* toggles, avatars, round icon buttons */

  /* ---------- SPACING (8px base, 5px micro) ---------- */
  --s-1: 5px;  --s-2: 10px; --s-3: 15px; --s-4: 20px;
  --s-5: 30px; --s-6: 40px; --s-7: 60px;

  /* ---------- TYPE ---------- */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fw-light: 300; /* @kind font */
  --fw-book: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */

  /* Type scale (px) — app runs LIGHT (300) as its default body weight */
  --t-display: 36px; /* page titles "Dashboard" */
  --t-h2:      26px;
  --t-h3:      18px; /* card titles "Overview" (book/400) */
  --t-body:    16px;
  --t-sm:      14px; /* sub-descriptions */
  --t-xs:      12px; /* labels, table cells, chips (most common size) */
  --t-2xs:     10px;

}
:root { --gray-100: #F0EFEE; --gray-150: #E4E2E0; --ink-30: rgba(33,33,33,.3); --cream: #FFFCF7; }

body { font-family: var(--font-sans); color: var(--ink); }
::placeholder { color: var(--ink-50); font-weight: var(--fw-light); opacity: 1; font-size: inherit; }

/* Round 116: standard gap between sections (the Sales deck platform cards → digital assistant gap). 160px at 1280px+, 112px at 768px and below.
   Sections use half of it top and bottom, so any two sections sit one gap apart. */
:root { --ft-section-gap: clamp(112px, 9.375vw + 40px, 160px); }