/* ============================================================
   AUTO-GENERATED — do not edit.
   Source of truth: design-system/tokens.css
   Regenerate with: ./tools/sync-tokens.sh
   ============================================================ */
/* ============================================================
   TenderCrew — design tokens
   Single source of truth for both surfaces:
     · landing/  (marketing, dark)
     · frontend/ (workspace app, light)

   Foundation: Notion-style sober editorial geometry.
   Familiarity through chrome. Differentiation through agents.

   Edit this file → run ./tools/sync-tokens.sh → both surfaces update.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ── Brand ──────────────────────────────────────────────────
     One signature primary (TenderBlue) — the recognizable button.
     Teal stays for AI/agent-active state.
     Gradient is the hero flourish only.
     ─────────────────────────────────────────────────────────── */
  --tc-blue:        #1A56DB;
  --tc-blue-pressed:#1E40AF;
  --tc-blue-deep:   #1E3A8A;
  --tc-blue-200:    #BFDBFE;
  --tc-blue-100:    #DBEAFE;
  --tc-blue-50:     #EFF6FF;

  --tc-link:        #2563EB;            /* inline text link — distinct from primary */
  --tc-link-pressed:#1D4ED8;

  --tc-teal:        #14B8A6;            /* AI / agent-active accent */
  --tc-teal-lt:     #5EEAD4;
  --tc-teal-50:     #F0FDFA;
  --tc-teal-100:    #CCFBF1;
  --tc-teal-glow:   rgba(20, 184, 166, 0.18);

  --tc-grad:        linear-gradient(135deg, #14B8A6 0%, #1A56DB 100%);
  --tc-grad-v:      linear-gradient(180deg, #14B8A6 0%, #1A56DB 100%);

  /* ── Ampel — requirement priority ─────────────────────────── */
  --tc-ko:          #DC2626;
  --tc-ko-bg:       #FEF2F2;
  --tc-ko-border:   #FECACA;
  --tc-must:        #D97706;
  --tc-must-bg:     #FFFBEB;
  --tc-must-border: #FDE68A;
  --tc-zk:          #1A56DB;
  --tc-zk-bg:       #EFF6FF;
  --tc-zk-border:   #BFDBFE;

  /* ── Status pills ─────────────────────────────────────────── */
  --tc-status-verified-bg: #ECFDF5; --tc-status-verified-fg: #047857;
  --tc-status-drafted-bg:  #EFF6FF; --tc-status-drafted-fg:  #1D4ED8;
  --tc-status-review-bg:   #FFFBEB; --tc-status-review-fg:   #B45309;
  --tc-status-empty-bg:    #F1F5F9; --tc-status-empty-fg:    #64748B;

  /* ── Agent identity ───────────────────────────────────────── */
  --tc-scout:        #059669;
  --tc-scout-bg:     #ECFDF5;
  --tc-strategist:   #CA8A04;
  --tc-strategist-bg:#FEFCE8;
  --tc-drafter:      #1A56DB;
  --tc-drafter-bg:   #EFF6FF;

  /* ── Pastel feature tints (Notion-foundation) ───────────────
     Use to differentiate feature cards, agent surfaces,
     content-type sections — never decorative-only.
     ─────────────────────────────────────────────────────────── */
  --tc-tint-peach:       #FFEDD8;
  --tc-tint-rose:        #FFE4E6;
  --tc-tint-mint:        #D1FAE5;
  --tc-tint-lavender:    #EDE9FE;
  --tc-tint-sky:         #DBEAFE;
  --tc-tint-yellow:      #FEF3C7;
  --tc-tint-yellow-bold: #FCD34D;        /* high-emphasis banner */
  --tc-tint-cream:       #FAF5EE;

  /* ── Surface — light (workspace app) ──────────────────────── */
  --tc-canvas:      #FFFFFF;             /* page bg + cards */
  --tc-surface:     #F8FAFC;             /* subtle section bg, search-pill rest */
  --tc-surface-soft:#F1F5F9;             /* quieter divisions */
  --tc-surface-2:   #F8FAFC;             /* (alias kept for back-compat) */
  --tc-surface-3:   #FBFBFB;
  --tc-canvas-page: #F4F7FB;             /* page-level body bg (was --tc-canvas before) */

  /* ── Surface — dark (marketing) ───────────────────────────── */
  --tc-bg:          #060C1A;
  --tc-bg-card:     #0C1525;
  --tc-bg-subtle:   rgba(255, 255, 255, 0.02);

  /* ── Hairlines & ink ──────────────────────────────────────── */
  --tc-hairline:        #E5E7EB;
  --tc-hairline-soft:   #F1F5F9;
  --tc-hairline-strong: #D1D5DB;
  --tc-border:          rgba(148, 163, 184, 0.10);
  --tc-border-hi:       rgba(20, 184, 166, 0.30);

  --tc-ink-deep:    #0B0B0B;             /* pure for emphasis */
  --tc-ink:         #111827;             /* primary text ON LIGHT surfaces */
  --tc-charcoal:    #1F2937;             /* warm-charcoal — body emphasis */

  /* Text colors for dark surfaces (marketing hero band, footer) */
  --tc-on-dark:     #F1F5F9;             /* primary text ON DARK */
  --tc-on-dark-mid: #94A3B8;             /* secondary on dark */
  --tc-on-dark-dim: #64748B;             /* tertiary on dark */

  --tc-slate-900:   #0F172A;
  --tc-slate-800:   #1E293B;
  --tc-slate-700:   #334155;
  --tc-slate-600:   #475569;
  --tc-slate-500:   #64748B;
  --tc-slate-400:   #94A3B8;
  --tc-slate-300:   #CBD5E1;
  --tc-slate-200:   #E2E8F0;
  --tc-slate-100:   #F1F5F9;
  --tc-slate-50:    #F8FAFC;

  --tc-ink-mid:     #94A3B8;
  --tc-ink-dim:     #475569;

  /* ── Type ───────────────────────────────────────────────────
     One sans family. Inter (Notion-Sans is Inter-based).
     ─────────────────────────────────────────────────────────── */
  --tc-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --tc-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --tc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Type scale — Notion proportions ──────────────────────── */
  --tc-text-hero:   80px;   /* hero display: 600/-2px/1.05 */
  --tc-text-disp:   56px;   /* display-lg:   600/-1px/1.10 */
  --tc-text-h1:     48px;   /* page H1:      600/-0.5/1.15 */
  --tc-text-h2:     36px;   /* section H2:   600/-0.5/1.20 */
  --tc-text-h3:     28px;   /* card H3:      600/0/1.25    */
  --tc-text-h4:     22px;   /* tile H4:      600/0/1.30    */
  --tc-text-h5:     18px;   /* small H5:     600/0/1.40    */
  --tc-text-body:   16px;   /* primary body: 400/0/1.55    */
  --tc-text-sm:     14px;   /* secondary:    400/0/1.50    */
  --tc-text-xs:     13px;   /* caption:      600/0/1.40    */
  --tc-text-meta:   12px;
  --tc-text-micro:  11px;

  /* ── Radii ──────────────────────────────────────────────────
     Sober editorial geometry: 8px buttons, 12px cards.
     Pills (rounded-full) only for tags / status badges.
     ─────────────────────────────────────────────────────────── */
  --tc-radius-xs:   4px;    /* tag chips */
  --tc-radius-sm:   6px;    /* type badges */
  --tc-radius-md:   8px;    /* buttons, inputs */
  --tc-radius-lg:   12px;   /* cards, pricing tiers */
  --tc-radius-xl:   16px;   /* larger feature panels */
  --tc-radius-2xl:  20px;   /* featured product showcases */
  --tc-radius-3xl:  24px;   /* large feature cards */
  --tc-radius-pill: 9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --tc-shadow-flat:      0 0 0 1px var(--tc-hairline);
  --tc-shadow-subtle:    0 1px 2px 0 rgba(15, 15, 15, 0.04);
  --tc-shadow-card:      0 4px 12px 0 rgba(15, 15, 15, 0.08);
  --tc-shadow-mockup:    0 24px 48px -8px rgba(15, 15, 15, 0.20);
  --tc-shadow-modal:     0 16px 48px -8px rgba(15, 15, 15, 0.16);
  --tc-shadow-ambient:
       0 12px 32px -4px rgba(15, 23, 42, 0.04),
       0 4px  12px -2px rgba(15, 23, 42, 0.02);
  --tc-shadow-ai-bar:    0 8px 40px rgba(15, 23, 42, 0.18);
  --tc-shadow-cinematic:
       0 48px 96px rgba(0, 0, 0, 0.55),
       0 0 0 1px rgba(255, 255, 255, 0.03);
  --tc-shadow-cta-white:
       0 24px 64px rgba(0, 0, 0, 0.25),
       0 0 0 1px rgba(255, 255, 255, 0.06);
  --tc-shadow-card-sm:   0 1px 2px rgba(15, 23, 42, 0.04);

  /* ── Spacing ──────────────────────────────────────────────── */
  --tc-space-1:  4px;  --tc-space-2:  8px;   --tc-space-3:  12px;
  --tc-space-4:  16px; --tc-space-5:  20px;  --tc-space-6:  24px;
  --tc-space-8:  32px; --tc-space-10: 40px;  --tc-space-12: 48px;
  --tc-space-16: 64px; --tc-space-20: 80px;  --tc-space-24: 96px;
  --tc-space-hero: 120px;

  /* ── Layout ───────────────────────────────────────────────── */
  --tc-nav-height-marketing: 64px;
  --tc-nav-height-app:       56px;
  --tc-sidebar-width:        280px;
  --tc-content-max:          1280px;
  --tc-matrix-max:           1000px;
  --tc-aibar-max:            896px;

  /* ── Motion ───────────────────────────────────────────────── */
  --tc-ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --tc-dur-fast:   150ms;
  --tc-dur-base:   200ms;
  --tc-dur-slow:   300ms;
  --tc-dur-reveal: 650ms;
}

/* ============================================================
   Reusable semantic classes
   ============================================================ */

.tc-light, .tc-dark {
  font-family: var(--tc-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tc-light { background: var(--tc-canvas-page); color: var(--tc-ink); }
.tc-dark  { background: var(--tc-bg);          color: var(--tc-on-dark); }

/* ── Display headings (Notion scale) ──────────────────────── */
.tc-h-hero {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: clamp(40px, 8vw, 80px);
  letter-spacing: -2px;
  line-height: 1.05;
}
.tc-h-disp {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -1px;
  line-height: 1.10;
}
.tc-h1 {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.tc-h2 {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.5px;
  line-height: 1.20;
}
.tc-h3 { font-family: var(--tc-font-display); font-weight: 600; font-size: 28px; line-height: 1.25; }
.tc-h4 { font-family: var(--tc-font-display); font-weight: 600; font-size: 22px; line-height: 1.30; }
.tc-h5 { font-family: var(--tc-font-display); font-weight: 600; font-size: 18px; line-height: 1.40; }

/* ── Back-compat aliases — keep existing call-sites working ── */
.tc-h1-marketing { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(40px, 8vw, 80px); letter-spacing: -2px; line-height: 1.05; }
.tc-h2-marketing { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(24px, 3.6vw, 36px); letter-spacing: -0.5px; line-height: 1.20; }
.tc-h3-marketing { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0; line-height: 1.25; }
.tc-h1-app { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(20px, 4.5vw, 28px); letter-spacing: -0.4px; line-height: 1.25; color: var(--tc-ink); }
.tc-h2-app { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(17px, 3vw, 22px); letter-spacing: -0.2px; line-height: 1.30; color: var(--tc-ink); }
.tc-h3-app { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(15px, 2vw, 18px); line-height: 1.40; color: var(--tc-ink); }

/* ── Body, lead, meta ─────────────────────────────────────── */
.tc-lead { font-family: var(--tc-font-body); font-size: clamp(16px, 1.6vw, 18px); font-weight: 400; line-height: 1.55; color: var(--tc-slate-600); }
.tc-body { font-family: var(--tc-font-body); font-size: 16px; font-weight: 400; line-height: 1.55; }
.tc-body-sm { font-family: var(--tc-font-body); font-size: 14px; font-weight: 400; line-height: 1.50; }
.tc-meta { font-family: var(--tc-font-body); font-size: 13px; font-weight: 600; line-height: 1.40; color: var(--tc-slate-500); }

.tc-eyebrow {
  font-family: var(--tc-font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-teal);
}
.tc-eyebrow-app {
  font-family: var(--tc-font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tc-slate-500);
}

.tc-id {
  font-family: var(--tc-font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--tc-slate-500);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.tc-grad-text {
  background: var(--tc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Logo tile (Workspace-style) ──────────────────────────── */
.tc-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.tc-logo-tile {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--tc-blue);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.4px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.tc-logo-tile--lg { width: 40px; height: 40px; border-radius: 9px; font-size: 22px; }
.tc-logo-wordmark {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--tc-ink);
}
.tc-dark .tc-logo-wordmark { color: var(--tc-on-dark); }

/* ── Pastel feature tints ─────────────────────────────────── */
.tc-tint-peach       { background: var(--tc-tint-peach);       color: var(--tc-charcoal); }
.tc-tint-rose        { background: var(--tc-tint-rose);        color: var(--tc-charcoal); }
.tc-tint-mint        { background: var(--tc-tint-mint);        color: var(--tc-charcoal); }
.tc-tint-lavender    { background: var(--tc-tint-lavender);    color: var(--tc-charcoal); }
.tc-tint-sky         { background: var(--tc-tint-sky);         color: var(--tc-charcoal); }
.tc-tint-yellow      { background: var(--tc-tint-yellow);      color: var(--tc-charcoal); }
.tc-tint-yellow-bold { background: var(--tc-tint-yellow-bold); color: var(--tc-ink-deep); }
.tc-tint-cream       { background: var(--tc-tint-cream);       color: var(--tc-charcoal); }

/* ── Badges (Ampel) ───────────────────────────────────────── */
.tc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tc-badge--ko   { background: var(--tc-ko-bg);   color: var(--tc-ko);   border-color: var(--tc-ko-border); }
.tc-badge--must { background: var(--tc-must-bg); color: var(--tc-must); border-color: var(--tc-must-border); }
.tc-badge--zk   { background: var(--tc-zk-bg);   color: var(--tc-zk);   border-color: var(--tc-zk-border); }

/* ── Status pills ─────────────────────────────────────────── */
.tc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: 9999px;
  font-family: var(--tc-font-body);
  font-weight: 500;
  font-size: 11px;
}
.tc-pill--verified { background: var(--tc-status-verified-bg); color: var(--tc-status-verified-fg); }
.tc-pill--drafted  { background: var(--tc-status-drafted-bg);  color: var(--tc-status-drafted-fg); }
.tc-pill--review   { background: var(--tc-status-review-bg);   color: var(--tc-status-review-fg); }
.tc-pill--empty    { background: var(--tc-status-empty-bg);    color: var(--tc-status-empty-fg); }

/* ── Agent identity chips ─────────────────────────────────── */
.tc-agent {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 10px 0 8px;
  border-radius: 9999px;
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 11px;
}
.tc-agent::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: 0.85; }
.tc-agent--scout      { background: var(--tc-scout-bg);      color: var(--tc-scout); }
.tc-agent--strategist { background: var(--tc-strategist-bg); color: var(--tc-strategist); }
.tc-agent--drafter    { background: var(--tc-drafter-bg);    color: var(--tc-drafter); }

/* ── Buttons (Notion-style: rectangular 8px, 40px height) ─── */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--tc-font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.30;
  cursor: pointer;
  transition: background var(--tc-dur-fast) var(--tc-ease-soft),
              border-color var(--tc-dur-fast) var(--tc-ease-soft),
              opacity var(--tc-dur-fast) var(--tc-ease-soft);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tc-btn--primary { background: var(--tc-blue); color: #fff; }
.tc-btn--primary:hover:not(:disabled) { background: var(--tc-blue-pressed); }
.tc-btn--gradient { background: var(--tc-grad); color: #fff; }
.tc-btn--gradient:hover:not(:disabled) { opacity: 0.92; }
.tc-btn--dark { background: var(--tc-ink-deep); color: #fff; }
.tc-btn--dark:hover:not(:disabled) { background: #000; }
.tc-btn--secondary { background: transparent; color: var(--tc-ink); border-color: var(--tc-hairline-strong); }
.tc-btn--secondary:hover:not(:disabled) { background: var(--tc-surface); }
.tc-btn--on-dark { background: #fff; color: var(--tc-ink); }
.tc-btn--on-dark:hover:not(:disabled) { background: rgba(255, 255, 255, 0.92); }
.tc-btn--sec-on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.tc-btn--sec-on-dark:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.tc-btn--ghost { background: transparent; color: var(--tc-ink); padding: 8px 12px; height: 36px; border-radius: 6px; }
.tc-btn--ghost:hover:not(:disabled) { background: var(--tc-surface); }
.tc-btn--link { background: transparent; color: var(--tc-link); padding: 0; height: auto; font-weight: 500; }
.tc-btn--link:hover:not(:disabled) { color: var(--tc-link-pressed); text-decoration: underline; }

/* ── AI indicator ─────────────────────────────────────────── */
@keyframes tc-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }
.tc-ai-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--tc-teal);
  animation: tc-pulse 1.8s var(--tc-ease-soft) infinite;
}