/* =============================================================
   TrustedBrands.ca — Design Tokens
   v1.0 · 2026
   Single source of truth for color, type, spacing, radii, shadows.
   Anything visual that isn't here should be a deliberate exception.
   ============================================================= */

/* Webfont imports — pin to the families used in the system. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Geist:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Color · Brand ──────────────────────────────────────── */
  --tb-forest:      #0F1F1A;   /* Primary dark surface. Hero, footers, ink-on-light buttons */
  --tb-charcoal:    #1A1D1F;   /* Body ink. Default text color */
  --tb-slate:       #3A3F44;   /* Secondary text, muted ink */
  --tb-stone:       #F5F4F1;   /* Primary surface. Backgrounds, light cards */
  --tb-cream:       #FAF7F0;   /* Elevated surface (lighter than stone) */
  --tb-paper:       #FFFFFF;   /* Pure white. Use sparingly — most surfaces should be stone/cream */
  --tb-gold:        #C9A46A;   /* Accent. Wordmark .CA, accent rules, callouts */
  --tb-gold-deep:   #A8854D;   /* Accent on light backgrounds (better contrast) */
  --tb-muted:       #6B6E72;   /* Tertiary text, meta info, captions */

  /* ─── Color · Semantic ───────────────────────────────────── */
  --tb-fg:          var(--tb-charcoal);
  --tb-fg-muted:    var(--tb-slate);
  --tb-fg-faint:    var(--tb-muted);
  --tb-fg-inverse:  var(--tb-stone);
  --tb-bg:          var(--tb-stone);
  --tb-bg-elevated: var(--tb-cream);
  --tb-bg-dark:     var(--tb-forest);
  --tb-accent:      var(--tb-gold);
  --tb-accent-deep: var(--tb-gold-deep);
  --tb-rule:        rgba(26, 29, 31, 0.10);   /* Hairlines on light */
  --tb-rule-strong: rgba(26, 29, 31, 0.18);
  --tb-rule-dark:   rgba(245, 244, 241, 0.16); /* Hairlines on dark */
  --tb-vetted:      var(--tb-forest);          /* "vetted" status color */

  /* ─── Type · Families ────────────────────────────────────── */
  --tb-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --tb-font-body:    'Geist', system-ui, sans-serif;
  --tb-font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ─── Type · Scale (semantic) ────────────────────────────── */
  --tb-text-xs:   11px;
  --tb-text-sm:   13px;
  --tb-text-base: 15px;
  --tb-text-md:   17px;
  --tb-text-lg:   22px;
  --tb-text-xl:   28px;
  --tb-text-2xl:  36px;
  --tb-text-3xl:  48px;
  --tb-text-4xl:  64px;
  --tb-text-5xl:  88px;

  /* ─── Type · Weights ─────────────────────────────────────── */
  --tb-weight-regular:  400;
  --tb-weight-medium:   500;
  --tb-weight-semibold: 600;
  --tb-weight-bold:     700;

  /* ─── Type · Letterspacing (used in eyebrows + wordmarks) ── */
  --tb-tracking-tight:  -0.025em;   /* Big display */
  --tb-tracking-snug:   -0.01em;
  --tb-tracking-normal: 0;
  --tb-tracking-wide:   0.12em;     /* Small caps */
  --tb-tracking-wider:  0.22em;     /* Eyebrows, labels */
  --tb-tracking-widest: 0.32em;     /* Logo tagline */

  /* ─── Spacing ─────────────────────────────────────────────
     8-pt base. Use the named tokens — avoid arbitrary pixels. */
  --tb-space-1:  4px;
  --tb-space-2:  8px;
  --tb-space-3:  12px;
  --tb-space-4:  16px;
  --tb-space-5:  24px;
  --tb-space-6:  32px;
  --tb-space-7:  48px;
  --tb-space-8:  64px;
  --tb-space-9:  96px;

  /* ─── Radii ───────────────────────────────────────────────
     Restrained — cards 4px, pills/buttons 999px, tiles 2px.
     Avoid mid-range bubble radii like 12-16px. */
  --tb-radius-xs:   2px;
  --tb-radius-sm:   4px;
  --tb-radius-md:   8px;
  --tb-radius-pill: 999px;

  /* ─── Shadows — soft, warm, low ─────────────────────────── */
  --tb-shadow-sm: 0 1px 2px rgba(15, 31, 26, 0.06);
  --tb-shadow-md: 0 4px 12px rgba(15, 31, 26, 0.08);
  --tb-shadow-lg: 0 12px 32px rgba(15, 31, 26, 0.14);

  /* ─── Layout ─────────────────────────────────────────────── */
  --tb-content-max: 1200px;
  --tb-gutter:      48px;
}

/* =============================================================
   Base element styles — opinionated, applies to anything that
   loads this file. Reset is minimal; only what brand needs.
   ============================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--tb-font-body);
  font-size: var(--tb-text-base);
  line-height: 1.55;
  color: var(--tb-fg);
  background: var(--tb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--tb-font-display);
  font-weight: var(--tb-weight-medium);
  letter-spacing: var(--tb-tracking-snug);
  margin: 0;
  color: var(--tb-fg);
  line-height: 1.1;
}

h1 { font-size: var(--tb-text-4xl); letter-spacing: var(--tb-tracking-tight); }
h2 { font-size: var(--tb-text-2xl); }
h3 { font-size: var(--tb-text-xl); }
h4 { font-size: var(--tb-text-md); }

p { margin: 0 0 var(--tb-space-4); }

a { color: var(--tb-fg); text-decoration: underline; text-decoration-color: var(--tb-accent); text-underline-offset: 3px; }
a:hover { color: var(--tb-accent-deep); }

/* ─── Utility classes — short, brand-tagged ─────────────────── */

.tb-eyebrow {
  font-family: var(--tb-font-body);
  font-weight: var(--tb-weight-medium);
  font-size: var(--tb-text-xs);
  letter-spacing: var(--tb-tracking-wider);
  text-transform: uppercase;
  color: var(--tb-fg);
}

.tb-rule { border: 0; border-top: 1px solid var(--tb-rule); margin: var(--tb-space-6) 0; }
.tb-rule-gold { border: 0; border-top: 2px solid var(--tb-accent); width: 64px; margin: var(--tb-space-4) 0; }

.tb-mono { font-family: var(--tb-font-mono); }