/* ============================================================
   Talking Climate Collaborative — brand design tokens.
   Ported from the design-system skill (.claude/skills/talking-climate-design/
   colors_and_type.css). Additive layer: loaded on member pages before main.css.

   Reconciliation with the theme's existing tokens (main.css :root):
   - The 9 core brand colours are IDENTICAL in value to the theme's --navy etc.,
     so they are ALIASED here (--tcc-navy: var(--navy)) rather than redeclared —
     the hex lives in exactly one place and the semantic layer below still works.
   - Everything else (derived tints, semantic surfaces, type scale, spacing,
     radii, shadows, motion) is NEW and namespaced under --tcc-* / --*-scale.
   - @font-face lives in fonts.css (loaded globally).
   ============================================================ */

:root {
	/* ---------- CORE PALETTE — aliased to the theme's canonical tokens ---------- */
	--tcc-navy:     var(--navy);     /* #1B2D5B */
	--tcc-sienna:   var(--sienna);   /* #D4935A */
	--tcc-pumpkin:  var(--pumpkin);  /* #F28030 */
	--tcc-cerulean: var(--cerulean); /* #33C6F5 */
	--tcc-cream:    var(--cream);    /* #F0E0B0 */
	--tcc-ink:      var(--slate);    /* #2C3A4A — body text on light */
	--tcc-white:    var(--white);    /* #FFFFFF */
	--tcc-offwhite: var(--offwhite); /* #F7F6F2 */
	--tcc-sand:     var(--sand);     /* #E8E6DF */

	/* ---------- TINTS & SHADES (derived, harmonious) — NEW ---------- */
	--tcc-navy-900: #11203F;   /* deepest navy — footers, overlays */
	--tcc-navy-700: #1B2D5B;
	--tcc-navy-500: #34487A;   /* hover / lifted navy */
	--tcc-navy-300: #8893B0;   /* muted navy text on light */
	--tcc-pumpkin-600: #DE6E1F; /* pumpkin pressed/hover */
	--tcc-pumpkin-100: #FCE5D3; /* pumpkin wash / tag bg */
	--tcc-cerulean-100: #DAF4FD;/* cerulean wash */
	--tcc-cream-50:  #FAF3DC;  /* lightest cream wash */

	/* ---------- NEUTRALS — NEW (extend the theme's --sand/--slate) ---------- */
	--tcc-sand-200: #D8D5CB;   /* stronger warm border */
	--tcc-muted:    #6B7686;   /* secondary / caption text on light */

	/* ---------- SEMANTIC SURFACES — NEW ---------- */
	--fg-1: var(--tcc-navy);       /* primary text / headlines */
	--fg-2: var(--tcc-ink);        /* body text */
	--fg-3: var(--tcc-muted);      /* secondary / captions */
	--fg-on-dark: #FFFFFF;
	--fg-on-dark-2: rgba(255,255,255,0.66);
	--bg-1: #FFFFFF;               /* base surface */
	--bg-2: var(--tcc-offwhite);   /* page / section background */
	--bg-3: var(--tcc-cream);      /* warm highlighted section */
	--bg-dark: var(--tcc-navy);    /* dark section */
	--accent: var(--tcc-pumpkin);  /* primary accent / CTA */
	--accent-ink: #FFFFFF;         /* text on accent */
	--link: var(--tcc-pumpkin);
	--border-1: var(--tcc-sand);
	--border-2: var(--tcc-sand-200);

	/* ---------- TYPE FAMILIES ---------- */
	/* Ubuntu is the global default (set in main.css). Nunito is OPT-IN for
	   "preferenced areas" — applied only via the .tcc-body/.tcc-lead classes. */
	--font-display: 'Ubuntu', system-ui, -apple-system, sans-serif; /* headlines, labels, UI */
	--font-body:    'Nunito', 'Ubuntu', system-ui, sans-serif;       /* opt-in long-form body */
	--font-ui:      'Ubuntu', system-ui, sans-serif;                 /* buttons, nav, eyebrows */

	/* ---------- TYPE SCALE (px @ 16 base) — NEW ---------- */
	--text-eyebrow: 0.625rem;   /* 10px — uppercase label, tracked */
	--text-caption: 0.75rem;    /* 12px */
	--text-sm:      0.875rem;   /* 14px */
	--text-base:    1rem;       /* 16px body */
	--text-lg:      1.125rem;   /* 18px lead body */
	--text-h6:      1.25rem;    /* 20px */
	--text-h5:      1.5rem;     /* 24px */
	--text-h4:      2rem;       /* 32px */
	--text-h3:      2.5rem;     /* 40px */
	--text-h2:      3.25rem;    /* 52px */
	--text-h1:      4.5rem;     /* 72px display */

	/* ---------- WEIGHTS — NEW ---------- */
	--w-regular: 400;
	--w-medium:  500;
	--w-semibold: 600;
	--w-bold:    700;
	--w-black:   800;  /* Nunito only — extra punch on big numbers */

	/* ---------- TRACKING — NEW ---------- */
	--track-eyebrow: 0.16em;   /* uppercase eyebrows */
	--track-caps:    0.01em;   /* big all-caps headlines: nearly tight */
	--track-tight:  -0.01em;   /* large display */

	/* ---------- RADII — NEW (theme's --tc-radius is unified to 12px = --r-md) ---------- */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 12px;     /* default card radius (new components) */
	--r-lg: 16px;
	--r-xl: 24px;
	--r-pill: 100px;  /* buttons, chips, nav CTA */

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

	/* ---------- ELEVATION — NEW (warm-tinted, soft) ---------- */
	--shadow-xs: 0 0.5px 0 rgba(27,45,91,0.06);
	--shadow-sm: 0 1px 2px rgba(27,45,91,0.06), 0 1px 1px rgba(27,45,91,0.04);
	--shadow-md: 0 4px 16px rgba(27,45,91,0.08);
	--shadow-lg: 0 12px 32px rgba(27,45,91,0.12);
	--shadow-cta: 0 6px 18px rgba(242,128,48,0.30); /* pumpkin glow for primary CTA */

	/* ---------- MOTION — NEW ---------- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 0.15s;
	--dur-base: 0.3s;
	--dur-slow: 0.5s;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — opt-in classes.
   Apply these for design-system-consistent type. .tcc-body / .tcc-lead use
   Nunito (the only place Nunito renders unless you opt in elsewhere); the
   heading/display classes use Ubuntu.
   ============================================================ */
.tcc-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-eyebrow);
	font-weight: var(--w-medium);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}
.tcc-h1 {
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 6vw, var(--text-h1));
	font-weight: var(--w-bold);
	line-height: 1.04;
	letter-spacing: var(--track-tight);
	color: var(--fg-1);
}
.tcc-display-caps {           /* the signature TCC statement style */
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, var(--text-h2));
	font-weight: var(--w-bold);
	text-transform: uppercase;
	line-height: 1.08;
	letter-spacing: var(--track-caps);
	color: var(--fg-1);
}
.tcc-h2 {
	font-family: var(--font-display);
	font-size: var(--text-h2); font-weight: var(--w-bold);
	line-height: 1.1; letter-spacing: var(--track-tight); color: var(--fg-1);
}
.tcc-h3 {
	font-family: var(--font-display);
	font-size: var(--text-h3); font-weight: var(--w-bold);
	line-height: 1.15; color: var(--fg-1);
}
.tcc-h4 {
	font-family: var(--font-display);
	font-size: var(--text-h4); font-weight: var(--w-bold);
	line-height: 1.2; color: var(--fg-1);
}
.tcc-h5 {
	font-family: var(--font-display);
	font-size: var(--text-h5); font-weight: var(--w-medium);
	line-height: 1.3; color: var(--fg-1);
}
.tcc-lead {
	font-family: var(--font-body);
	font-size: var(--text-lg); font-weight: var(--w-regular);
	line-height: 1.65; color: var(--fg-2);
}
.tcc-body {
	font-family: var(--font-body);
	font-size: var(--text-base); font-weight: var(--w-regular);
	line-height: 1.7; color: var(--fg-2);
}
.tcc-caption {
	font-family: var(--font-ui);
	font-size: var(--text-caption); font-weight: var(--w-regular);
	line-height: 1.5; color: var(--fg-3);
}
.tcc-quote {                  /* speaker-template pull quote */
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.5vw, var(--text-h4));
	font-weight: var(--w-bold);
	text-transform: uppercase;
	line-height: 1.18;
	letter-spacing: var(--track-caps);
}