/* ==========================================================================
   TeeBot7 — shared design tokens
   --------------------------------------------------------------------------
   One source of truth for both surfaces: the marketing site (style.css) and
   the ops dashboard (templates/dashboard.html). Before this file the site was
   lime + electric blue and the dashboard was indigo + emerald — two brands.

   Everything downstream reads these variables. Change a colour here, not in a
   component. The palette is deliberately light-only: the product's proof is
   phone screenshots on white, and a dark ground fights them.
   ========================================================================== */

:root {
  /* --- Ground & surfaces ------------------------------------------------ */
  /* Neutrals carry a faint green bias so they read as chosen, not default. */
  --tb-ground:      #f7f8f5;
  --tb-surface:     #ffffff;
  --tb-surface-2:   #eef1ea;
  --tb-surface-3:   #e4e9dd;

  /* --- Ink -------------------------------------------------------------- */
  --tb-ink:         #0d1b14;
  --tb-ink-2:       #33443b;
  --tb-muted:       #647268;
  --tb-faint:       #8b968d;

  /* --- Lines ------------------------------------------------------------ */
  --tb-line:        #dfe4d9;
  --tb-line-2:      #c3ccbb;

  /* --- Brand ------------------------------------------------------------ */
  /* The lime is the action colour. It is too light to set text on white, so
     brand-ink is the readable variant for type and brand-wash for fills. */
  --tb-brand:       #84cc16;
  --tb-brand-hover: #6ba50f;
  --tb-brand-ink:   #3f6212;
  --tb-brand-wash:  #f0f7de;

  /* --- Accent (links, secondary actions) -------------------------------- */
  --tb-accent:      #0284c7;
  --tb-accent-hover:#0369a1;
  --tb-accent-wash: #e6f4fb;

  /* --- Semantic — status only, never decoration ------------------------- */
  --tb-ok:          #15803d;
  --tb-ok-wash:     #e3f2e8;
  --tb-warn:        #b45309;
  --tb-warn-wash:   #fbeedd;
  --tb-risk:        #b91c1c;
  --tb-risk-wash:   #f9e6e6;
  --tb-info:        #4f46e5;
  --tb-info-wash:   #ecebfd;

  /* --- Type ------------------------------------------------------------- */
  --tb-font-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --tb-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tb-font-mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Fluid scale — every step clamps, so nothing overflows a phone. */
  --tb-t-hero:  clamp(34px, 5.6vw, 60px);
  --tb-t-h2:    clamp(26px, 3.6vw, 40px);
  --tb-t-h3:    clamp(19px, 2.1vw, 23px);
  --tb-t-lead:  clamp(17px, 1.9vw, 20px);
  --tb-t-body:  16.5px;
  --tb-t-small: 14.5px;
  --tb-t-micro: 12.5px;

  /* --- Space ------------------------------------------------------------ */
  --tb-s-1: 4px;
  --tb-s-2: 8px;
  --tb-s-3: 12px;
  --tb-s-4: 16px;
  --tb-s-5: 24px;
  --tb-s-6: 32px;
  --tb-s-7: 48px;
  --tb-s-8: 64px;
  --tb-s-9: 88px;

  /* --- Radius ----------------------------------------------------------- */
  --tb-r-sm:  6px;
  --tb-r-md:  10px;
  --tb-r-lg:  16px;
  --tb-r-xl:  24px;
  --tb-r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  /* Spent by role, not stamped on every block. */
  --tb-shadow-sm: 0 1px 2px rgba(13, 27, 20, .05);
  --tb-shadow-md: 0 2px 4px rgba(13, 27, 20, .05), 0 12px 24px -18px rgba(13, 27, 20, .3);
  --tb-shadow-lg: 0 4px 8px rgba(13, 27, 20, .06), 0 32px 56px -32px rgba(13, 27, 20, .38);

  /* --- Layout ----------------------------------------------------------- */
  --tb-maxw:      1160px;
  --tb-maxw-text: 68ch;
  --tb-gutter:    5vw;
}