/**
 * TT — Transform Tomorrow
 * Design Tokens v1.0 · May 2026
 * ─────────────────────────────────────────────────────────────────
 * Three verticals, one system:
 *   TTO · Turn Tomorrow On      → B2C    → --tt-tto: #FFB800
 *   TPB · Take Power Back       → B2B    → --tt-tpb: #00C2FF
 *   TTT · Transform Tomorrow Today → B2B2G → --tt-ttt: #00E5A0
 *
 * All global tokens use --tt- prefix.
 * Per-vertical accent is set via --tt-accent on the screen root.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   ROOT TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {

  /* ── VERTICAL COLORS ─────────────────────────────────────
     TTO · B2C  "Turn Tomorrow On"  warm solar amber / orange
     TPB · B2B  "Take Power Back"   electric blue
     TTT · B2B2G "Transform Tomorrow Today"  circuit green     */

  /* TTO · B2C primary accent — warm solar amber/orange.
     The product's signature action colour (CTAs, chips, send button). */
  --tt-tto:     #F5A623;
  --tt-tto-2:   #E08C00;
  --tt-tto-dim: rgba(245,166,35,0.14);
  --tt-tto-glow: 0 0 28px rgba(245,166,35,0.34), 0 0 10px rgba(245,166,35,0.18);

  /* TPB · electric blue — data / AI intelligence */
  --tt-tpb:     #38BDF8;
  --tt-tpb-2:   #0EA5E9;
  --tt-tpb-dim: rgba(56,189,248,0.12);
  --tt-tpb-glow: 0 0 24px rgba(56,189,248,0.34), 0 0 8px rgba(56,189,248,0.18);

  /* TTT · eco green — savings / environment / success */
  --tt-ttt:     #22D39A;
  --tt-ttt-2:   #0F9C6E;
  --tt-ttt-dim: rgba(34,211,154,0.12);
  --tt-ttt-glow: 0 0 24px rgba(34,211,154,0.34), 0 0 8px rgba(34,211,154,0.18);

  /* Brand violet — secondary identity accent (logo mark, highlights) */
  --tt-violet:     #8B5CF6;
  --tt-violet-2:   #7C3AED;
  --tt-violet-dim:  rgba(139,92,246,0.14);

  /* ── GRADIENT ────────────────────────────────────────────
     Signature gradient — solar amber into brand violet (sunrise → sky) */
  --tt-grad: linear-gradient(135deg, #F5A623 0%, #FB923C 45%, #8B5CF6 100%);
  --tt-grad-h: linear-gradient(90deg, #F5A623 0%, #FB923C 100%);
  --tt-grad-subtle: linear-gradient(135deg, rgba(245,166,35,0.18), rgba(139,92,246,0.12));

  /* ── ACCENT (per-screen override) ───────────────────────
     Set --tt-accent on a wrapper to theme a whole section.
     Default: TTO amber (B2C public-facing)                  */
  --tt-accent:      var(--tt-tto);
  --tt-accent-2:    var(--tt-tto-2);
  --tt-accent-dim:  var(--tt-tto-dim);
  --tt-accent-glow: var(--tt-tto-glow);

  /* ── BACKGROUND PALETTE ─────────────────────────────────
     Deep navy, NOT pure black — warmer & more trustworthy    */
  --tt-bg:      #0B1120;   /* body background        */
  --tt-bg-2:    #0F172A;   /* sidebars / sections    */
  --tt-bg-3:    #16213A;   /* cards                  */
  --tt-bg-4:    #1E2C49;   /* elevated cards / chips */
  --tt-bg-5:    #273758;   /* hover / pressed        */

  /* ── BORDER ─────────────────────────────────────────────  */
  --tt-border:        rgba(148,176,224,0.14);
  --tt-border-subtle: rgba(148,176,224,0.07);
  --tt-border-strong: rgba(148,176,224,0.26);

  /* ── TEXT ─── contrast tuned for WCAG AA on --tt-bg ───────  */
  --tt-text:        #F4F7FF;   /* primary  ~16:1 */
  --tt-text-2:      #B4C2DC;   /* secondary ~8:1 */
  --tt-text-3:      #8194B4;   /* muted     ~4.7:1 (AA) */
  --tt-text-4:      #5C6E90;   /* faint — decorative only */

  /* ── STATUS ─────────────────────────────────────────────  */
  --tt-success:  #22D39A;
  --tt-warning:  #F5A623;
  --tt-error:    #FB7185;
  --tt-info:     #38BDF8;

  /* ── TYPOGRAPHY ─────────────────────────────────────────  */
  --tt-font-display: 'Space Grotesk', system-ui, sans-serif;
  --tt-font-body:    'DM Sans', system-ui, sans-serif;
  --tt-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --tt-text-xs:    0.6875rem;  /* 11px */
  --tt-text-sm:    0.8125rem;  /* 13px */
  --tt-text-base:  0.9375rem;  /* 15px */
  --tt-text-md:    1.0625rem;  /* 17px */
  --tt-text-lg:    1.25rem;    /* 20px */
  --tt-text-xl:    1.5rem;     /* 24px */
  --tt-text-2xl:   1.875rem;   /* 30px */
  --tt-text-3xl:   2.25rem;    /* 36px */
  --tt-text-4xl:   2.875rem;   /* 46px */
  --tt-text-5xl:   3.5rem;     /* 56px */
  --tt-text-display: clamp(2.75rem, 5.5vw, 4.5rem);

  --tt-weight-regular:  400;
  --tt-weight-medium:   500;
  --tt-weight-semibold: 600;
  --tt-weight-bold:     700;

  --tt-leading-tight:   1.12;
  --tt-leading-snug:    1.3;
  --tt-leading-normal:  1.55;
  --tt-leading-relaxed: 1.7;

  --tt-tracking-tight:  -0.035em;
  --tt-tracking-snug:   -0.02em;
  --tt-tracking-normal:  0;
  --tt-tracking-wide:    0.05em;
  --tt-tracking-caps:    0.1em;

  /* ── SPACING ────────────────────────────────────────────  */
  --tt-1:  0.25rem;
  --tt-2:  0.5rem;
  --tt-3:  0.75rem;
  --tt-4:  1rem;
  --tt-5:  1.25rem;
  --tt-6:  1.5rem;
  --tt-8:  2rem;
  --tt-10: 2.5rem;
  --tt-12: 3rem;
  --tt-16: 4rem;
  --tt-20: 5rem;
  --tt-24: 6rem;

  /* ── RADIUS ─── soft, modern, trustworthy (was 0 / blocky) ─  */
  --tt-r-sm:   6px;
  --tt-r-md:   10px;
  --tt-r-lg:   14px;
  --tt-r-xl:   18px;
  --tt-r-2xl:  24px;
  --tt-r-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────  */
  --tt-shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.25);
  --tt-shadow-md:  0 4px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --tt-shadow-lg:  0 12px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.35);
  --tt-shadow-xl:  0 24px 72px rgba(0,0,0,0.7), 0 8px 28px rgba(0,0,0,0.4);

  /* ── TRANSITIONS ─────────────────────────────────────────  */
  --tt-ease-fast:   cubic-bezier(0.2, 0.7, 0.3, 1);
  --tt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tt-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --tt-dur-fast:   150ms;
  --tt-dur-base:   250ms;
  --tt-dur-slow:   400ms;

  /* ── LAYOUT ──────────────────────────────────────────────  */
  --tt-w-sm:   640px;
  --tt-w-md:   768px;
  --tt-w-lg:   1024px;
  --tt-w-xl:   1280px;
  --tt-w-2xl:  1440px;

  /* ── Z-INDEX ─────────────────────────────────────────────  */
  --tt-z-base:    0;
  --tt-z-raised:  10;
  --tt-z-nav:     50;
  --tt-z-overlay: 100;
  --tt-z-modal:   200;
  --tt-z-toast:   300;

  /* ── BACKWARD COMPAT: --sm- aliases ─────────────────────
     So partner.html and existing pages continue to work     */
  --sm-font-display:    var(--tt-font-display);
  --sm-font-body:       var(--tt-font-body);
  --sm-bg:              var(--tt-bg);
  --sm-bg-section:      var(--tt-bg-2);
  --sm-bg-card:         var(--tt-bg-3);
  --sm-bg-elevated:     var(--tt-bg-4);
  --sm-border:          var(--tt-border);
  --sm-border-subtle:   var(--tt-border-subtle);
  --sm-text-primary:    var(--tt-text);
  --sm-text-secondary:  var(--tt-text-2);
  --sm-text-muted:      var(--tt-text-3);
  --sm-text-faint:      var(--tt-text-4);
  --sm-amber-500:       var(--tt-tto);
  --sm-amber-600:       var(--tt-tto-2);
  --sm-amber-300:       #FBD38D;
  --sm-amber-400:       #F8B84E;
  --sm-ai-400:          var(--tt-tpb);
  --sm-ai-500:          var(--tt-tpb);
  --sm-eco-400:         var(--tt-ttt);
  --sm-eco-500:         var(--tt-ttt);
  --sm-eco-600:         var(--tt-ttt-2);
  --sm-navy-950:        var(--tt-bg);
  --sm-navy-900:        var(--tt-bg-2);
  --sm-navy-800:        var(--tt-bg-3);
  --sm-navy-700:        var(--tt-bg-4);
  --sm-navy-600:        var(--tt-bg-5);
  --sm-navy-500:        var(--tt-bg-5);
  --sm-navy-200:        var(--tt-text-2);
  --sm-navy-100:        var(--tt-text);
  --sm-primary:         var(--tt-tto);
  --sm-primary-hover:   var(--tt-tto-2);
  --sm-space-1:  var(--tt-1);
  --sm-space-2:  var(--tt-2);
  --sm-space-3:  var(--tt-3);
  --sm-space-4:  var(--tt-4);
  --sm-space-5:  var(--tt-5);
  --sm-space-6:  var(--tt-6);
  --sm-space-8:  var(--tt-8);
  --sm-space-10: var(--tt-10);
  --sm-space-12: var(--tt-12);
  --sm-space-16: var(--tt-16);
  --sm-space-20: var(--tt-20);
  --sm-space-24: var(--tt-24);
  --sm-radius-sm:   var(--tt-r-sm);
  --sm-radius-md:   var(--tt-r-md);
  --sm-radius-lg:   var(--tt-r-lg);
  --sm-radius-xl:   var(--tt-r-xl);
  --sm-radius-2xl:  var(--tt-r-2xl);
  --sm-radius-full: var(--tt-r-full);
  --sm-shadow-sm:   var(--tt-shadow-sm);
  --sm-shadow-md:   var(--tt-shadow-md);
  --sm-shadow-lg:   var(--tt-shadow-lg);
  --sm-shadow-xl:   var(--tt-shadow-xl);
  --sm-shadow-glow-amber: var(--tt-tto-glow);
  --sm-shadow-glow-blue:  var(--tt-tpb-glow);
  --sm-shadow-glow-green: var(--tt-ttt-glow);
  --sm-ease-fast:   var(--tt-ease-fast);
  --sm-ease-spring: var(--tt-ease-spring);
  --sm-ease-smooth: var(--tt-ease-smooth);
  --sm-duration-fast:  var(--tt-dur-fast);
  --sm-duration-base:  var(--tt-dur-base);
  --sm-duration-slow:  var(--tt-dur-slow);
  --sm-text-xs:    var(--tt-text-xs);
  --sm-text-sm:    var(--tt-text-sm);
  --sm-text-base:  var(--tt-text-base);
  --sm-text-md:    var(--tt-text-md);
  --sm-text-lg:    var(--tt-text-lg);
  --sm-text-xl:    var(--tt-text-xl);
  --sm-text-2xl:   var(--tt-text-2xl);
  --sm-text-3xl:   var(--tt-text-3xl);
  --sm-text-4xl:   var(--tt-text-4xl);
  --sm-text-5xl:   var(--tt-text-5xl);
  --sm-text-display: var(--tt-text-display);
  --sm-weight-regular:   var(--tt-weight-regular);
  --sm-weight-medium:    var(--tt-weight-medium);
  --sm-weight-semibold:  var(--tt-weight-semibold);
  --sm-weight-bold:      var(--tt-weight-bold);
  --sm-weight-extrabold: var(--tt-weight-bold);
  --sm-leading-tight:    var(--tt-leading-tight);
  --sm-leading-snug:     var(--tt-leading-snug);
  --sm-leading-normal:   var(--tt-leading-normal);
  --sm-leading-relaxed:  var(--tt-leading-relaxed);
  --sm-tracking-tight:   var(--tt-tracking-tight);
  --sm-tracking-snug:    var(--tt-tracking-snug);
  --sm-tracking-normal:  var(--tt-tracking-normal);
  --sm-tracking-wide:    var(--tt-tracking-wide);
  --sm-tracking-wider:   var(--tt-tracking-caps);
  --sm-tracking-widest:  var(--tt-tracking-caps);
  --sm-z-nav:     var(--tt-z-nav);
  --sm-z-overlay: var(--tt-z-overlay);
  --sm-z-modal:   var(--tt-z-modal);
  --sm-z-toast:   var(--tt-z-toast);
  --sm-container-xl: var(--tt-w-xl);
  --sm-container-lg: var(--tt-w-lg);
  --sm-err-400:    var(--tt-error);
  --sm-err-500:    var(--tt-error);
  --sm-ai-600:     var(--tt-tpb-2);
  --sm-warn-400:   var(--tt-warning);
  --sm-white:      #FFFFFF;
  --sm-violet:     var(--tt-violet);
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-base);
  font-weight: var(--tt-weight-regular);
  line-height: var(--tt-leading-normal);
  color: var(--tt-text);
  background-color: var(--tt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--tt-font-body); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--tt-font-body); font-size: inherit; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--tt-bg); }
::-webkit-scrollbar-thumb { background: var(--tt-border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--tt-accent); }

/* ═══════════════════════════════════════════════════════════
   TT LOGO MARK — Transmission Tower SVG utility
   ═══════════════════════════════════════════════════════════ */
.tt-logo-mark { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════ */
.tt-display {
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-display);
  font-weight: var(--tt-weight-bold);
  line-height: var(--tt-leading-tight);
  letter-spacing: var(--tt-tracking-tight);
}

.tt-h1 {
  font-family: var(--tt-font-display);
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: var(--tt-weight-bold);
  line-height: var(--tt-leading-snug);
  letter-spacing: var(--tt-tracking-tight);
}

.tt-h2 {
  font-family: var(--tt-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--tt-weight-bold);
  letter-spacing: var(--tt-tracking-snug);
}

.tt-h3 {
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-xl);
  font-weight: var(--tt-weight-semibold);
}

.tt-mono {
  font-family: var(--tt-font-mono);
  font-size: var(--tt-text-sm);
}

/* Gradient text — spans all 3 vertical colors */
.tt-grad-text {
  background: var(--tt-grad-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accent text uses current vertical color */
.tt-accent-text { color: var(--tt-accent); }

/* ═══════════════════════════════════════════════════════════
   COMPONENT PRIMITIVES
   ═══════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────── */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-semibold);
  border-radius: var(--tt-r-lg);
  border: none;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--tt-dur-fast) var(--tt-ease-smooth);
}

.tt-btn:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}

/* Primary — filled with current accent */
.tt-btn-primary {
  background: var(--tt-accent);
  color: #07080F;
}
.tt-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--tt-accent-glow);
}
.tt-btn-primary:active { transform: none; filter: brightness(0.95); }

/* Gradient — signature TT gradient */
.tt-btn-grad {
  background: var(--tt-grad-h);
  color: #07080F;
  font-weight: var(--tt-weight-bold);
}
.tt-btn-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139,92,246,0.4);
  filter: brightness(1.05);
}

/* Outline — accent border */
.tt-btn-outline {
  background: transparent;
  color: var(--tt-accent);
  border: 1.5px solid var(--tt-accent);
}
.tt-btn-outline:hover {
  background: var(--tt-accent-dim);
  transform: translateY(-1px);
}

/* Ghost — subtle */
.tt-btn-ghost {
  background: transparent;
  color: var(--tt-text-2);
  border: 1px solid var(--tt-border);
}
.tt-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--tt-text);
  border-color: var(--tt-border-strong);
}

/* Sizes */
.tt-btn-sm  { padding: 0.375rem 0.875rem; font-size: var(--tt-text-xs); border-radius: var(--tt-r-md); }
.tt-btn-lg  { padding: 0.875rem 1.875rem; font-size: var(--tt-text-base); border-radius: var(--tt-r-xl); }
.tt-btn-xl  { padding: 1rem 2.25rem; font-size: var(--tt-text-md); border-radius: var(--tt-r-xl); letter-spacing: -0.01em; }
.tt-btn-icon{ width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--tt-r-md); flex-shrink: 0; }

/* ── Cards ───────────────────────────────────────────────── */
.tt-card {
  background: var(--tt-bg-3);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
  padding: var(--tt-6);
}

.tt-card-2 {
  background: var(--tt-bg-2);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
}

.tt-card-hover {
  transition: all var(--tt-dur-base) var(--tt-ease-smooth);
}
.tt-card-hover:hover {
  border-color: color-mix(in srgb, var(--tt-accent) 40%, transparent);
  box-shadow: var(--tt-accent-glow);
  transform: translateY(-2px);
}

/* Glass card */
.tt-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
}

/* ── Badges ──────────────────────────────────────────────── */
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-1);
  padding: 0.25rem 0.75rem;
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  border-radius: var(--tt-r-full);
  letter-spacing: var(--tt-tracking-wide);
}

.tt-badge-tto {
  color: var(--tt-tto);
  background: rgba(255,184,0,0.1);
  border: 1px solid rgba(255,184,0,0.25);
}
.tt-badge-tpb {
  color: var(--tt-tpb);
  background: rgba(0,194,255,0.1);
  border: 1px solid rgba(0,194,255,0.25);
}
.tt-badge-ttt {
  color: var(--tt-ttt);
  background: rgba(0,229,160,0.1);
  border: 1px solid rgba(0,229,160,0.25);
}
.tt-badge-muted {
  color: var(--tt-text-2);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--tt-border);
}

/* ── Inputs ──────────────────────────────────────────────── */
.tt-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--tt-text-sm);
  font-family: var(--tt-font-body);
  color: var(--tt-text);
  background: var(--tt-bg-3);
  border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  outline: none;
  transition: border-color var(--tt-dur-fast), box-shadow var(--tt-dur-fast);
}
.tt-input::placeholder { color: var(--tt-text-3); }
.tt-input:focus {
  border-color: var(--tt-accent);
  box-shadow: 0 0 0 3px var(--tt-accent-dim);
}

/* ── Divider ─────────────────────────────────────────────── */
.tt-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tt-border-strong), transparent);
}

/* ── Container ───────────────────────────────────────────── */
.tt-container {
  width: 100%;
  max-width: var(--tt-w-xl);
  margin: 0 auto;
  padding: 0 var(--tt-6);
}

@media (max-width: 640px) {
  .tt-container { padding: 0 var(--tt-4); }
}

/* ── Status indicator ────────────────────────────────────── */
.tt-dot-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tt-ttt);
  box-shadow: 0 0 8px var(--tt-ttt);
  animation: tt-pulse 2s ease-in-out infinite;
}

@keyframes tt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ── Gradient border ring ────────────────────────────────── */
.tt-ring {
  position: relative;
}
.tt-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--tt-grad);
  opacity: 0.5;
  z-index: -1;
  border-radius: calc(var(--tt-r-xl) + 1px);
}

/* ── Section tag / eyebrow ───────────────────────────────── */
.tt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-2);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-caps);
  text-transform: uppercase;
  color: var(--tt-accent);
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes tt-fade-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tt-slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tt-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes tt-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes tt-spin {
  to { transform: rotate(360deg); }
}

@keyframes tt-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes tt-grid-move {
  0%   { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

.tt-animate-in          { animation: tt-fade-in var(--tt-dur-slow) var(--tt-ease-fast) both; }
.tt-animate-in-d1       { animation-delay: 100ms; }
.tt-animate-in-d2       { animation-delay: 200ms; }
.tt-animate-in-d3       { animation-delay: 300ms; }
.tt-animate-in-d4       { animation-delay: 400ms; }
.tt-animate-in-d5       { animation-delay: 500ms; }

.tt-skeleton {
  background: linear-gradient(90deg,
    var(--tt-bg-3) 25%,
    var(--tt-bg-4) 50%,
    var(--tt-bg-3) 75%
  );
  background-size: 200% 100%;
  animation: tt-shimmer 1.5s infinite;
  border-radius: var(--tt-r-md);
}

/* ── Reveal on scroll ────────────────────────────────────── */
.tt-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--tt-ease-smooth), transform 0.55s var(--tt-ease-smooth);
}
.tt-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */
.tt-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.tt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Text */
.tt-text         { color: var(--tt-text); }
.tt-text-2       { color: var(--tt-text-2); }
.tt-text-3       { color: var(--tt-text-3); }
.tt-text-tto     { color: var(--tt-tto); }
.tt-text-tpb     { color: var(--tt-tpb); }
.tt-text-ttt     { color: var(--tt-ttt); }
.tt-text-success { color: var(--tt-success); }
.tt-text-error   { color: var(--tt-error); }

/* Backgrounds */
.tt-bg     { background: var(--tt-bg); }
.tt-bg-2   { background: var(--tt-bg-2); }
.tt-bg-3   { background: var(--tt-bg-3); }

/* Flex helpers */
.tt-flex    { display: flex; }
.tt-flex-col{ display: flex; flex-direction: column; }
.tt-items-c { align-items: center; }
.tt-items-s { align-items: flex-start; }
.tt-just-b  { justify-content: space-between; }
.tt-just-c  { justify-content: center; }
.tt-gap-2   { gap: var(--tt-2); }
.tt-gap-3   { gap: var(--tt-3); }
.tt-gap-4   { gap: var(--tt-4); }
.tt-gap-6   { gap: var(--tt-6); }
.tt-gap-8   { gap: var(--tt-8); }
.tt-w-full  { width: 100%; }
.tt-h-full  { height: 100%; }

/* Grid */
.tt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tt-6); }
.tt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tt-6); }
.tt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tt-6); }

/* Responsive */
@media (max-width: 768px) {
  .tt-hide-mobile { display: none !important; }
  .tt-grid-2, .tt-grid-3, .tt-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .tt-hide-desktop { display: none !important; }
}

/* ── Per-vertical accent overrides ──────────────────────── */
.tt-screen-tto {
  --tt-accent:      var(--tt-tto);
  --tt-accent-2:    var(--tt-tto-2);
  --tt-accent-dim:  var(--tt-tto-dim);
  --tt-accent-glow: var(--tt-tto-glow);
  /* legacy sm aliases */
  --sm-amber-500:   var(--tt-tto);
  --sm-amber-600:   var(--tt-tto-2);
  --sm-primary:     var(--tt-tto);
}

.tt-screen-tpb {
  --tt-accent:      var(--tt-tpb);
  --tt-accent-2:    var(--tt-tpb-2);
  --tt-accent-dim:  var(--tt-tpb-dim);
  --tt-accent-glow: var(--tt-tpb-glow);
}

.tt-screen-ttt {
  --tt-accent:      var(--tt-ttt);
  --tt-accent-2:    var(--tt-ttt-2);
  --tt-accent-dim:  var(--tt-ttt-dim);
  --tt-accent-glow: var(--tt-ttt-glow);
}

/* ═══════════════════════════════════════════════════════════
   LEGACY --sm-* COMPONENT LAYER
   ─────────────────────────────────────────────────────────────
   chat.html and partner.html author markup with .sm-btn /
   .sm-badge / .sm-card / .sm-input etc. These were previously
   only defined in tokens.css (which the pages no longer load),
   so the controls rendered unstyled. Defining them here — mapped
   onto the unified token set — restores a consistent, polished UI
   across every page.
   ═══════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────── */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-2);
  padding: 0.625rem 1.15rem;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-sm);
  font-weight: var(--tt-weight-semibold);
  line-height: 1;
  border-radius: var(--tt-r-lg);
  border: none;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--tt-dur-fast) var(--tt-ease-smooth),
              transform var(--tt-dur-fast) var(--tt-ease-smooth),
              box-shadow var(--tt-dur-fast) var(--tt-ease-smooth),
              border-color var(--tt-dur-fast) var(--tt-ease-smooth);
}
.sm-btn:focus-visible { outline: 2px solid var(--tt-tto); outline-offset: 2px; }

.sm-btn-primary { background: var(--tt-tto); color: #1A1206; }
.sm-btn-primary:hover { background: var(--tt-tto-2); transform: translateY(-1px); box-shadow: var(--tt-tto-glow); }
.sm-btn-primary:active { transform: translateY(0); }

.sm-btn-secondary {
  background: transparent;
  color: var(--tt-tto);
  border: 1.5px solid color-mix(in srgb, var(--tt-tto) 55%, transparent);
}
.sm-btn-secondary:hover { background: var(--tt-tto-dim); border-color: var(--tt-tto); transform: translateY(-1px); }

.sm-btn-ghost {
  background: transparent;
  color: var(--tt-text-2);
  border: 1px solid var(--tt-border);
}
.sm-btn-ghost:hover { background: rgba(148,176,224,0.06); color: var(--tt-text); border-color: var(--tt-border-strong); }

.sm-btn-sm { padding: 0.4rem 0.8rem; font-size: var(--tt-text-xs); border-radius: var(--tt-r-md); }
.sm-btn-lg { padding: 0.85rem 1.6rem; font-size: var(--tt-text-base); border-radius: var(--tt-r-xl); }
.sm-btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--tt-r-md); flex-shrink: 0; }
.sm-btn[disabled], .sm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Cards ───────────────────────────────────────────────── */
.sm-card {
  background: var(--tt-bg-3);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-xl);
  padding: var(--tt-6);
}
.sm-card-elevated {
  background: var(--tt-bg-4);
  border: 1px solid var(--tt-border-subtle);
  border-radius: var(--tt-r-xl);
  box-shadow: var(--tt-shadow-md);
}
.sm-card-hover { transition: all var(--tt-dur-base) var(--tt-ease-smooth); }
.sm-card-hover:hover {
  border-color: color-mix(in srgb, var(--tt-tto) 35%, transparent);
  box-shadow: var(--tt-tto-glow);
  transform: translateY(-2px);
}

/* ── Badges ──────────────────────────────────────────────── */
.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-1);
  padding: 0.22rem 0.7rem;
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  border-radius: var(--tt-r-full);
  letter-spacing: var(--tt-tracking-wide);
}
.sm-badge-amber { color: var(--sm-amber-400); background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.28); }
.sm-badge-blue  { color: var(--tt-tpb); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.26); }
.sm-badge-green { color: var(--tt-ttt); background: rgba(34,211,154,0.12); border: 1px solid rgba(34,211,154,0.26); }
.sm-badge-muted { color: var(--tt-text-2); background: rgba(148,176,224,0.08); border: 1px solid var(--tt-border); }

/* ── Inputs ──────────────────────────────────────────────── */
.sm-input {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: var(--tt-text-base);
  font-family: var(--tt-font-body);
  color: var(--tt-text);
  background: var(--tt-bg-3);
  border: 1.5px solid var(--tt-border);
  border-radius: var(--tt-r-lg);
  outline: none;
  transition: border-color var(--tt-dur-fast), box-shadow var(--tt-dur-fast);
}
.sm-input::placeholder { color: var(--tt-text-3); }
.sm-input:focus { border-color: var(--tt-tto); box-shadow: 0 0 0 3px var(--tt-tto-dim); }

/* ── Divider / dot / misc ────────────────────────────────── */
.sm-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--tt-border-strong), transparent); }
.sm-dot-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tt-ttt); box-shadow: 0 0 8px var(--tt-ttt);
  animation: sm-pulse 2s ease-in-out infinite;
}
@keyframes sm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes sm-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.sm-animate-in { animation: sm-fade-in var(--tt-dur-slow) var(--tt-ease-fast) both; }
.sm-skeleton {
  background: linear-gradient(90deg, var(--tt-bg-3) 25%, var(--tt-bg-4) 50%, var(--tt-bg-3) 75%);
  background-size: 200% 100%;
  animation: tt-shimmer 1.5s infinite;
  border-radius: var(--tt-r-md);
}

/* ── Typography / layout helpers used in markup ──────────── */
.sm-caption { font-size: var(--tt-text-xs); letter-spacing: var(--tt-tracking-wide); }
.sm-body { font-size: var(--tt-text-base); line-height: var(--tt-leading-normal); }
.sm-body-sm { font-size: var(--tt-text-sm); line-height: var(--tt-leading-normal); }
.sm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-w-full { width: 100%; }
.sm-h-full { height: 100%; }
.sm-flex { display: flex; }
.sm-flex-col { display: flex; flex-direction: column; }
.sm-items-center { align-items: center; }
.sm-justify-between { justify-content: space-between; }
.sm-gap-2 { gap: var(--tt-2); }
.sm-gap-3 { gap: var(--tt-3); }
.sm-gap-4 { gap: var(--tt-4); }
.sm-gap-6 { gap: var(--tt-6); }
.sm-text-primary   { color: var(--tt-text) !important; }
.sm-text-secondary { color: var(--tt-text-2) !important; }
.sm-text-muted     { color: var(--tt-text-3) !important; }
.sm-text-amber     { color: var(--tt-tto) !important; }
.sm-text-ai        { color: var(--tt-tpb) !important; }
.sm-text-eco       { color: var(--tt-ttt) !important; }
.sm-bg-card    { background: var(--tt-bg-3); }
.sm-bg-section { background: var(--tt-bg-2); }
.sm-border-default { border: 1px solid var(--tt-border); }
.sm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 768px) { .sm-hide-mobile { display: none !important; } }
@media (min-width: 769px) { .sm-hide-desktop { display: none !important; } }

/* Respect reduced-motion preference site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}