/* =========================================
   TINYSPARK DESIGN SYSTEM (Unified)
   ========================================= */
:root {
  /* Brand + UI tokens */
  --brand: #aeaeae;
  --brand-hover: #aeaeae;
  --brand-600: #d4d4d4;
  --brand-700: #a3a3a3;
  --brand-blue: #17a2b8;
  --highlight: #FFD65A;
  --neutral-bg: #111;
  --cta-orange: #fb7c13;
  --ink: #ffffff;
  --line: #333;
  --bg-body: #000;
  --bg-section: #111;
  --focus: #ffcc41;

  /* Figma Visual Refresh tokens */
  --ts-app-bg: #010101;
  --ts-ui-bg: #141415;
  --ts-btn: #3F3F43;
  --ts-container-border: rgba(60,60,67,0.6);
  --ts-orange: #FB7C13;
  --ts-big-bird: #FFD65A;
  --ts-teal: #17A2B8;
  --ts-alert: #FF4144;
  --ts-gray10: #F7F7F7;
  --ts-gray50: #919191;
  --ts-gray60: #787878;
  --ts-gray70: #5E5E5E;
  --ts-gray80: #454545;
  --ts-gray90: #2C2C2C;
  --ts-gray100: #121212;

  /* Typography tokens (TTS v1) */
  --ts-font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --ts-text-primary: rgba(255, 255, 255, 0.98);
  --ts-text-body: rgba(255, 255, 255, 0.78);
  --ts-text-muted: rgba(255, 255, 255, 0.60);
  --ts-text-subtle: rgba(255, 255, 255, 0.48);
  --ts-text-accent: #FFD65A;

  --ts-display-min: 36px;
  --ts-display-max: 48px;
  --ts-headline-min: 32px;
  --ts-headline-max: 40px;
  --ts-subhead-min: 18px;
  --ts-subhead-max: 22px;
  --ts-body-min: 16px;
  --ts-body-max: 18px;
  --ts-meta-min: 12px;
  --ts-meta-max: 14px;

  --ts-display-line: 1.25;
  --ts-headline-line: 1.30;
  --ts-subhead-line: 1.45;
  --ts-body-line: 1.55;
  --ts-meta-line: 1.40;

  --ts-display-track: -0.015em;
  --ts-headline-track: -0.010em;
  --ts-subhead-track: 0.010em;
  --ts-body-track: 0.005em;
  --ts-meta-track: 0.120em;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ts-font-sans);
  color: var(--ts-text-primary);
  background-color: var(--bg-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* TTS Tier Classes */
.ts-display {
  font-size: clamp(var(--ts-display-min), 4.6vw, var(--ts-display-max));
  line-height: var(--ts-display-line);
  letter-spacing: var(--ts-display-track);
  font-weight: 800;
  color: var(--ts-text-primary);
  text-wrap: balance;
}

.ts-headline {
  font-size: clamp(var(--ts-headline-min), 3.8vw, var(--ts-headline-max));
  line-height: var(--ts-headline-line);
  letter-spacing: var(--ts-headline-track);
  font-weight: 700;
  color: var(--ts-text-primary);
  text-wrap: balance;
}

.ts-subhead {
  font-size: clamp(var(--ts-subhead-min), 2.1vw, var(--ts-subhead-max));
  line-height: var(--ts-subhead-line);
  letter-spacing: var(--ts-subhead-track);
  font-weight: 500;
  color: var(--ts-text-body);
  text-wrap: balance;
}

.ts-body {
  font-size: clamp(var(--ts-body-min), 1.7vw, var(--ts-body-max));
  line-height: var(--ts-body-line);
  letter-spacing: var(--ts-body-track);
  font-weight: 400;
  color: var(--ts-text-body);
}

.ts-meta {
  font-size: clamp(var(--ts-meta-min), 1.2vw, var(--ts-meta-max));
  line-height: var(--ts-meta-line);
  letter-spacing: var(--ts-meta-track);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ts-text-subtle);
}

/* TTS Color Variants */
.ts-muted {
  color: var(--ts-text-muted) !important;
}

.ts-subtle {
  color: var(--ts-text-subtle) !important;
}

.ts-accent {
  color: var(--ts-text-accent) !important;
}

/* Link Styles */
a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cta-orange);
  text-decoration: none;
}

a:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Unified Button System — Figma Visual Refresh aligned */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 16px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.25px;
  text-decoration: none;
  line-height: 18px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.18s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid transparent;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-lg {
  padding: 16px 28px;
  font-weight: 700;
}

.btn-primary {
  background: var(--ts-btn);
  color: var(--ts-gray10) !important;
}

.btn-primary:hover {
  background: var(--ts-gray80);
}

.btn-primary:active {
  background: var(--ts-gray90);
}

.btn-secondary {
  background: var(--ts-ui-bg);
  color: var(--ts-gray10);
  border: none;
}

.btn-secondary:hover {
  background: var(--ts-gray100);
}

.btn-tertiary {
  background: var(--ts-ui-bg);
  border: 1px solid var(--ts-container-border);
  color: var(--ts-gray10);
}

.btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.btn-outline {
  background: var(--ts-ui-bg);
  border: 1px solid var(--ts-container-border);
  color: var(--ts-gray10);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.04);
}

.btn-ghost {
  background: transparent;
  color: var(--ts-text-muted);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.90);
}

/* SVG icons inside buttons */
.btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Shared Read More Disclosure */
.details-more summary {
  list-style: none;
  cursor: pointer;
  margin-top: 1.25rem;
}

.details-more summary::-webkit-details-marker {
  display: none;
}

.details-more summary .label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.details-more summary .chev {
  opacity: .6;
  transition: transform .2s ease;
}

.details-more[open] summary .chev {
  transform: rotate(90deg);
}

.details-more .more-body {
  margin-top: 1rem;
}