/* ============================================================
   TalentForge — Color & Type tokens
   Source of truth for the design system. Mirrors v9 prototype.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=Architects+Daughter&display=swap');

:root {
  /* ─── Brand / Signature ──────────────────────────────── */
  --tf-lime:        #C8F135;   /* the brand. CTAs, "live", proof. */
  --tf-lime-d:      #A8D010;
  --tf-lime-soft:   rgba(200, 241, 53, 0.08);
  --tf-lime-glow:   rgba(200, 241, 53, 0.25);

  /* ─── Forest (canvas / chrome) ───────────────────────── */
  --tf-forest-1:    #0D2318;   /* phone canvas, sheet bg */
  --tf-forest-2:    #142B1E;   /* menus, role cards */
  --tf-forest-3:    #1C3828;   /* elevated surface */
  --tf-blink-green: #0C831F;   /* deep brand green ('blink' partner) */
  --tf-blink-green-d:#086C18;

  /* ─── Neutrals ───────────────────────────────────────── */
  --tf-page-bg:     #080808;   /* hero / docs page background */
  --tf-paper:       #FFFFFF;
  --tf-cream:       #F8F7F4;   /* page bg in light contexts */
  --tf-ink:         #0A0A0A;   /* type on lime, page ink */
  --tf-mid:         #888888;
  --tf-line:        #E5E5E5;

  /* ─── Translucent fg layers (on dark forest/black) ───── */
  --tf-fg-1:        rgba(255,255,255,0.92);   /* primary text */
  --tf-fg-2:        rgba(255,255,255,0.65);   /* secondary text */
  --tf-fg-3:        rgba(255,255,255,0.45);   /* meta / kickers */
  --tf-fg-4:        rgba(255,255,255,0.25);   /* dividers, faint */
  --tf-stroke-1:    rgba(255,255,255,0.08);   /* card border */
  --tf-stroke-2:    rgba(255,255,255,0.14);   /* hover border */
  --tf-surface-1:   rgba(255,255,255,0.025);  /* card */
  --tf-surface-2:   rgba(255,255,255,0.05);   /* hover card */

  /* ─── Signal palette ─────────────────────────────────── */
  --tf-blink-yellow:#F8CB46;   /* Blinkit accent / "working" amber */
  --tf-pink:        #FF6EB4;   /* problem framing */
  --tf-sky:         #6EB9FF;   /* mentor / clarity */
  --tf-purple:      #A855F7;   /* MCQ / cognitive / task */
  --tf-orange:      #FF6B35;   /* execution warm */

  /* Signal axes (Elo signal bars) */
  --sig-ownership:  #C8F135;
  --sig-clarity:    #6EB9FF;
  --sig-problem:    #FF6EB4;
  --sig-execution:  #FF6B35;
  --sig-speed:      #A855F7;
  --sig-rolefit:    #F8CB46;

  /* ─── Typography ─────────────────────────────────────── */
  --tf-display:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --tf-mono:     'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --tf-hand:     'Caveat', 'Architects Daughter', cursive;

  /* ─── Radii ──────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-pill:100px;

  /* ─── Spacing (8pt-ish) ──────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10:40px;

  /* ─── Shadows (mostly drop + lime glow on CTAs) ──────── */
  --shadow-card:   0 20px 40px -20px rgba(0,0,0,.4);
  --shadow-sheet:  0 -20px 60px -10px rgba(0,0,0,.8);
  --shadow-cta:    0 10px 30px -6px rgba(200,241,53,.45);
  --shadow-cta-h:  0 14px 36px -6px rgba(200,241,53,.55), 0 0 0 4px rgba(200,241,53,.12);
  --glow-soft:     0 0 40px -10px rgba(200,241,53,.15);

  /* ─── Motion ─────────────────────────────────────────── */
  --ease-out:      cubic-bezier(.2, .8, .2, 1);
  --dur-fast:      .15s;
  --dur-base:      .2s;
  --dur-slow:      .3s;
}

/* ─── Semantic / role-based aliases ───────────────────── */
:root {
  --bg-page:       var(--tf-page-bg);
  --bg-app:        var(--tf-forest-1);
  --bg-card:       var(--tf-surface-1);
  --bg-card-hover: var(--tf-surface-2);
  --bg-cta:        var(--tf-lime);

  --fg-primary:    var(--tf-fg-1);
  --fg-secondary:  var(--tf-fg-2);
  --fg-meta:       var(--tf-fg-3);
  --fg-on-cta:     var(--tf-ink);
  --fg-accent:     var(--tf-lime);

  --border-card:   var(--tf-stroke-1);
  --border-accent: rgba(200,241,53,.2);
}

/* ============================================================
   Base type defaults — apply on .tf-type or html w/ this stylesheet
   ============================================================ */

.tf-type, .tf-app {
  font-family: var(--tf-display);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Display / titles (used inside phone canvas) ─────── */
.t-flow-title {
  font-family: var(--tf-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: #fff;
}
.t-flow-title .it  { font-style: italic; font-weight: 300; color: rgba(255,255,255,.4); }
.t-flow-title .strk{ color: transparent; -webkit-text-stroke: 2px var(--tf-lime); }

.t-page-heading {
  font-family: var(--tf-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}
.t-page-heading .it { font-style: italic; font-weight: 300; color: rgba(255,255,255,.55); }

.t-card-title {
  font-family: var(--tf-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}
.t-card-title .num { color: var(--tf-lime); }
.t-card-title .alt { color: var(--tf-blink-yellow); }

.t-h-md {
  font-family: var(--tf-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
}

.t-body {
  font-family: var(--tf-display);
  font-size: 13px;
  font-weight: 400;
  color: var(--tf-fg-2);
  line-height: 1.55;
}
.t-body strong { color: #fff; font-weight: 700; }
.t-body em     { font-style: normal; background: rgba(200,241,53,.12); color: var(--tf-lime); padding: 1px 4px; border-radius: 3px; font-weight: 500; }

.t-body-sm {
  font-family: var(--tf-display);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tf-fg-2);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* ─── Mono kickers / labels ───────────────────────────── */
.t-kicker {
  font-family: var(--tf-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tf-lime);
  font-weight: 500;
}
.t-kicker-mute {
  font-family: var(--tf-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tf-fg-3);
}
.t-meta {
  font-family: var(--tf-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--tf-fg-3);
}

/* ─── Numerals (Elo, scores, durations) ───────────────── */
.t-num-display {
  font-family: var(--tf-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}
.t-num-display.lime { color: var(--tf-lime); }
.t-num-mono {
  font-family: var(--tf-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--tf-fg-2);
  letter-spacing: 0.04em;
}

/* ─── Italic display flourish (TalentForge signature) ─── */
.t-it {
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,.55);
}

/* ─── Hand / Caveat (sparingly — annotations, signatures) */
.t-hand {
  font-family: var(--tf-hand);
  font-weight: 500;
  letter-spacing: 0.005em;
}