/* ============================================================
   TARGETHIT V2 DESIGN TOKENS — CANONICAL SOURCE (BRF-006)
   DUAL THEME (Rick 2026-06-11): light + dark share one variable
   vocabulary. Theme selection rides the site-wide next-themes
   toggle (html.dark — site default is dark; light is the member
   opt-in). Consumers only ever read var(--thv2-*).
   Served at /v2/tokens.css · JS mirror: src/app/v2/tokens.ts
   Rules: motion <= 200ms · prefers-reduced-motion respected ·
   numbers tabular · losses shown, colored honestly, both themes.
   ============================================================ */

.thv2 {
  /* ---------- LIGHT palette (base — html without .dark) ---------- */
  --thv2-bg:            #FAFAFA;
  --thv2-bg-raised:     #F4F4F5;
  --thv2-surface:       #FFFFFF;
  --thv2-surface-2:     #F4F4F5;
  --thv2-border:        #E4E4E7;
  --thv2-border-strong: #D4D4D8;
  --thv2-fg:            #18181B;
  --thv2-fg-muted:      #52525B;
  --thv2-fg-subtle:     #71717A;

  --thv2-red:           #CE2C31;
  --thv2-red-strong:    #A81E22;
  --thv2-red-dim:       rgba(206, 44, 49, 0.08);

  --thv2-pos:           #1E7E4E;
  --thv2-neg:           #CE2C31;
  --thv2-pos-dim:       rgba(30, 126, 78, 0.10);
  --thv2-neg-dim:       rgba(206, 44, 49, 0.08);

  /* strategy identity (both themes — decorative dots + strokes) */
  --thv2-strat-liquid:  #10B981;
  --thv2-strat-cobra:   #0EA5E9;
  --thv2-strat-viper:   #A855F7;
  --thv2-strat-raphael: #F59E0B;

  /* ---------- type (theme-independent) ---------- */
  --thv2-font-display: var(--font-v2-display, "Space Grotesk", "Inter", system-ui, sans-serif);
  --thv2-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --thv2-font-mono:    var(--font-v2-mono, "IBM Plex Mono", ui-monospace, "SF Mono", monospace);

  --thv2-text-xs: 0.75rem;   --thv2-text-sm: 0.8125rem; --thv2-text-base: 0.9375rem;
  --thv2-text-lg: 1.125rem;  --thv2-text-xl: 1.375rem;  --thv2-text-2xl: 1.75rem;
  --thv2-text-3xl: 2.25rem;  --thv2-text-4xl: 3rem;     --thv2-text-display: clamp(2.5rem, 5.5vw, 4rem);
  --thv2-tracking-tight: -0.025em;
  --thv2-tracking-label: 0.08em;

  /* ---------- spacing & shape (theme-independent) ---------- */
  --thv2-space-1: 4px;  --thv2-space-2: 8px;   --thv2-space-3: 12px;
  --thv2-space-4: 16px; --thv2-space-5: 24px;  --thv2-space-6: 32px;
  --thv2-space-7: 48px; --thv2-space-8: 64px;  --thv2-space-9: 96px;
  --thv2-container: 1120px;
  --thv2-radius: 10px;
  --thv2-radius-sm: 6px;

  /* ---------- motion (hard ceiling 200ms) ---------- */
  --thv2-dur-fast: 120ms; --thv2-dur: 160ms; --thv2-dur-max: 200ms;
  --thv2-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* semantic-variable remap — components styled with Tailwind semantic
     tokens harmonize automatically; values resolve per active theme */
  --color-background: var(--thv2-bg);
  --color-foreground: var(--thv2-fg);
  --color-card: var(--thv2-surface);
  --color-card-foreground: var(--thv2-fg);
  --color-border: var(--thv2-border);
  --color-input: var(--thv2-border);
  --color-muted: var(--thv2-surface-2);
  --color-muted-foreground: var(--thv2-fg-muted);
  --color-primary: var(--thv2-red);
  --color-ring: var(--thv2-red);

  background: var(--thv2-bg);
  color: var(--thv2-fg);
  font-family: var(--thv2-font-body);
  font-size: var(--thv2-text-base);
  -webkit-font-smoothing: antialiased;
}

/* ---------- DARK palette (html.dark via site toggle; .thv2-dark =
   explicit force for theme-state-immune surfaces e.g. OBS) ---------- */
.dark .thv2, .thv2.thv2-dark {
  --thv2-bg:            #0A0B0E;
  --thv2-bg-raised:     #0F1115;
  --thv2-surface:       #13161B;
  --thv2-surface-2:     #181C22;
  --thv2-border:        #22272F;
  --thv2-border-strong: #303743;
  --thv2-fg:            #E9EBEE;
  --thv2-fg-muted:      #9AA3B0;
  --thv2-fg-subtle:     #69727F;

  --thv2-red:           #E5484D;
  --thv2-red-strong:    #CE2C31;
  --thv2-red-dim:       rgba(229, 72, 77, 0.12);

  --thv2-pos:           #2FA86A;
  --thv2-neg:           #E5484D;
  --thv2-pos-dim:       rgba(47, 168, 106, 0.12);
  --thv2-neg-dim:       rgba(229, 72, 77, 0.10);
}

/* ---------- primitives (theme-agnostic — vars do the work) ---------- */
.thv2 .thv2-container { max-width: var(--thv2-container); margin: 0 auto; padding-left: var(--thv2-space-5); padding-right: var(--thv2-space-5); }
.thv2 .thv2-display { font-family: var(--thv2-font-display); letter-spacing: var(--thv2-tracking-tight); font-weight: 600; }
.thv2 .thv2-label { font-size: var(--thv2-text-xs); letter-spacing: var(--thv2-tracking-label); text-transform: uppercase; color: var(--thv2-fg-subtle); font-weight: 600; }
.thv2 .thv2-num { font-family: var(--thv2-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.thv2 .thv2-card { background: var(--thv2-surface); border: 1px solid var(--thv2-border); border-radius: var(--thv2-radius); transition: border-color var(--thv2-dur) var(--thv2-ease), background var(--thv2-dur) var(--thv2-ease); }
.thv2 a.thv2-card:hover { border-color: var(--thv2-border-strong); background: var(--thv2-surface-2); }
.thv2 .thv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--thv2-radius-sm); font-weight: 600; font-size: var(--thv2-text-base); padding: 12px 22px; transition: background var(--thv2-dur) var(--thv2-ease), border-color var(--thv2-dur) var(--thv2-ease), color var(--thv2-dur) var(--thv2-ease); }
.thv2 .thv2-btn-primary { background: var(--thv2-red); color: #fff; }
.thv2 .thv2-btn-primary:hover { background: var(--thv2-red-strong); }
.thv2 .thv2-btn-ghost { border: 1px solid var(--thv2-border-strong); color: var(--thv2-fg-muted); }
.thv2 .thv2-btn-ghost:hover { color: var(--thv2-fg); border-color: var(--thv2-fg-subtle); }
.thv2 .thv2-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--thv2-text-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--thv2-border); color: var(--thv2-fg-muted); }
.thv2 .thv2-pos { color: var(--thv2-pos); }
.thv2 .thv2-neg { color: var(--thv2-neg); }
.thv2 .thv2-hr { border: 0; border-top: 1px solid var(--thv2-border); }
.thv2 .thv2-live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--thv2-pos); display: inline-block; animation: thv2-pulse 2.4s ease-in-out infinite; }
@keyframes thv2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.thv2 ::selection { background: var(--thv2-red-dim); }
.thv2 .logo-text { color: var(--thv2-fg); }
.thv2 .logo-text .hit { color: var(--thv2-red); }

@media (prefers-reduced-motion: reduce) {
  .thv2 *, .thv2 *::before, .thv2 *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .thv2 .thv2-skeleton::after { animation: none; }
  .thv2 .thv2-strategy-rail { scroll-behavior: auto; }
}

/* ============================================================
   LITERAL-CLASS -> TOKEN BRIDGE (theme-agnostic)
   Shared prod components (strategies, lessons, legal, blog shells)
   are styled in literal Tailwind colors. Each literal class maps
   to the semantic VAR it plays — the var resolves per theme, so
   one rule set serves light AND dark (incl. dark: spellings,
   which become harmless: they resolve correctly either way).
   Property-specific on purpose: zinc-100 is dark-mode text AND
   light-mode bg — different roles, different vars.
   Removed when components migrate to tokens natively post-swap.
   ============================================================ */
/* backgrounds */
.thv2 .bg-white { background-color: var(--thv2-surface); }
.thv2 .bg-zinc-50 { background-color: var(--thv2-bg-raised); }
.thv2 .bg-zinc-100 { background-color: var(--thv2-surface-2); }
.thv2 .bg-zinc-200 { background-color: var(--thv2-surface-2); }
.thv2 .bg-zinc-800, .thv2 .dark\:bg-zinc-800 { background-color: var(--thv2-surface-2); }
.thv2 .bg-zinc-900, .thv2 .dark\:bg-zinc-900 { background-color: var(--thv2-surface); }
.thv2 .bg-zinc-950, .thv2 .dark\:bg-zinc-950 { background-color: var(--thv2-bg); }
.thv2 .hover\:bg-zinc-50:hover, .thv2 .hover\:bg-zinc-100:hover { background-color: var(--thv2-surface-2); }
.thv2 .hover\:bg-zinc-800:hover, .thv2 .dark\:hover\:bg-zinc-800:hover { background-color: var(--thv2-surface-2); }
/* text */
.thv2 .text-zinc-50, .thv2 .dark\:text-zinc-50 { color: var(--thv2-fg); }
.thv2 .text-zinc-100, .thv2 .dark\:text-zinc-100 { color: var(--thv2-fg); }
.thv2 .text-zinc-200, .thv2 .dark\:text-zinc-200 { color: var(--thv2-fg); }
.thv2 .text-zinc-300, .thv2 .dark\:text-zinc-300 { color: var(--thv2-fg-muted); }
.thv2 .text-zinc-400, .thv2 .dark\:text-zinc-400 { color: var(--thv2-fg-muted); }
.thv2 .text-zinc-500, .thv2 .dark\:text-zinc-500 { color: var(--thv2-fg-subtle); }
.thv2 .text-zinc-600, .thv2 .dark\:text-zinc-600 { color: var(--thv2-fg-muted); }
.thv2 .text-zinc-700 { color: var(--thv2-fg); }
.thv2 .text-zinc-800 { color: var(--thv2-fg); }
.thv2 .text-zinc-900 { color: var(--thv2-fg); }
.thv2 .hover\:text-zinc-900:hover, .thv2 .dark\:hover\:text-foreground:hover { color: var(--thv2-fg); }
/* borders */
.thv2 .border-zinc-200, .thv2 .dark\:border-zinc-200 { border-color: var(--thv2-border); }
.thv2 .border-zinc-300 { border-color: var(--thv2-border); }
.thv2 .border-zinc-700, .thv2 .dark\:border-zinc-700 { border-color: var(--thv2-border-strong); }
.thv2 .border-zinc-800, .thv2 .dark\:border-zinc-800 { border-color: var(--thv2-border); }
.thv2 .hover\:border-zinc-300:hover, .thv2 .hover\:border-zinc-400:hover { border-color: var(--thv2-border-strong); }
.thv2 .hover\:border-zinc-600:hover, .thv2 .dark\:hover\:border-zinc-600:hover, .thv2 .dark\:hover\:border-zinc-700:hover { border-color: var(--thv2-border-strong); }
/* accents */
.thv2 .text-emerald-400, .thv2 .dark\:text-emerald-400 { color: var(--thv2-pos); }
.thv2 .text-emerald-500, .thv2 .text-emerald-600 { color: var(--thv2-pos); }
.thv2 .bg-emerald-600 { background-color: var(--thv2-pos); }
.thv2 .text-red-500, .thv2 .text-red-600, .thv2 .dark\:text-red-400 { color: var(--thv2-neg); }
.thv2 .text-rose-600, .thv2 .dark\:text-rose-400 { color: var(--thv2-neg); }
.thv2 .bg-red-600 { background-color: var(--thv2-red); }
.thv2 .hover\:bg-red-700:hover { background-color: var(--thv2-red-strong); }
.thv2 .rounded-xl { border-radius: var(--thv2-radius); }

/* ============================================================
   BRF-007 — mobile-first additions (appended 2026-06-11).
   Mobile = restructure, never strip: rail carousel for the
   strategy grid, hamburger menu, sticky CTA, >=44px targets.
   All colors via vars -> dual-theme safe by construction.
   ============================================================ */

/* --- strategy rail: snap carousel <640px, grid above --- */
.thv2 .thv2-strategy-rail { display: flex; gap: var(--thv2-space-4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-left: calc(-1 * var(--thv2-space-5)); margin-right: calc(-1 * var(--thv2-space-5)); padding-left: var(--thv2-space-5); padding-right: var(--thv2-space-5); scrollbar-width: none; }
.thv2 .thv2-strategy-rail::-webkit-scrollbar { display: none; }
.thv2 .thv2-strategy-rail > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: center; }
.thv2 .thv2-rail-hint { font-size: var(--thv2-text-xs); color: var(--thv2-fg-subtle); margin-top: 10px; text-align: center; }
@media (min-width: 640px) {
  .thv2 .thv2-strategy-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .thv2 .thv2-strategy-rail > * { flex: none; max-width: none; }
  .thv2 .thv2-rail-hint { display: none; }
}
@media (min-width: 1024px) {
  .thv2 .thv2-strategy-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- skeletons (streamed-in live data) --- */
.thv2 .thv2-skeleton { position: relative; overflow: hidden; background: var(--thv2-bg-raised); border: 1px solid var(--thv2-border); border-radius: var(--thv2-radius); }
.thv2 .thv2-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--thv2-border), transparent); animation: thv2-shimmer 1.4s ease-in-out infinite; }
@keyframes thv2-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* --- mobile nav (hamburger + sheet) --- */
.thv2 .thv2-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--thv2-radius-sm); border: 1px solid var(--thv2-border); color: var(--thv2-fg-muted); background: transparent; }
.thv2 .thv2-mobile-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; border-bottom: 1px solid var(--thv2-border); background: var(--thv2-bg); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.45); }
.thv2 .thv2-mobile-link { display: flex; align-items: center; min-height: 48px; padding: 0 var(--thv2-space-5); font-size: var(--thv2-text-base); font-weight: 500; color: var(--thv2-fg-muted); border-top: 1px solid var(--thv2-border); }
.thv2 .thv2-mobile-link:active { background: var(--thv2-bg-raised); }
@media (min-width: 640px) { .thv2 .thv2-menu-btn, .thv2 .thv2-mobile-panel { display: none; } }

/* --- sticky bottom CTA (mobile only, signed-out only) --- */
.thv2 .thv2-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--thv2-space-5) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--thv2-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--thv2-border); display: flex; align-items: center; gap: var(--thv2-space-4); }
.thv2 .thv2-sticky-cta .thv2-btn { min-height: 48px; flex: 1; }
.thv2 .thv2-sticky-spacer { height: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .thv2 .thv2-sticky-cta, .thv2 .thv2-sticky-spacer { display: none; } }

/* --- tap targets: bump compact nav buttons on touch widths --- */
@media (max-width: 639px) {
  .thv2 nav .thv2-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}