/* Treatlly Brand System — shared styles
   Palette: Teal · Clinical (deep teal + warm apricot + paper)
   Typography: Inter Tight (UI) + Fraunces (display accent) */

:root {
  --tr-primary: #0E5F52;
  --tr-primary-hover: #0B4A40;
  --tr-primary-soft: #E6F1EE;
  --tr-ink: #15201D;
  --tr-ink-soft: #3B4B47;
  --tr-ink-muted: #7B8A86;
  --tr-paper: #FBFAF6;
  --tr-paper-elev: #FFFFFF;
  --tr-line: #E7E3DB;
  --tr-accent: #E8A07A;
  --tr-accent-soft: #FBEFE5;
  --tr-accent-ink: #7A3E1F;
  --tr-success: #3A8A6B;
  --tr-warn: #C88A2E;
  --tr-danger: #B84A3E;

  --tr-font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tr-font-display: "Fraunces", "Times New Roman", serif;
  --tr-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --tr-radius-sm: 6px;
  --tr-radius-md: 10px;
  --tr-radius-lg: 14px;
  --tr-radius-xl: 20px;

  --tr-shadow-sm: 0 1px 2px rgba(21,32,29,0.05), 0 1px 1px rgba(21,32,29,0.04);
  --tr-shadow-md: 0 4px 12px rgba(21,32,29,0.06), 0 2px 4px rgba(21,32,29,0.04);
  --tr-shadow-lg: 0 18px 40px rgba(21,32,29,0.08), 0 6px 12px rgba(21,32,29,0.05);
}

html, body {
  font-family: var(--tr-font-sans);
  background: var(--tr-paper);
  color: var(--tr-ink);
  letter-spacing: -0.005em;
}

body.bg-white, body.bg-slate-50 { background: var(--tr-paper); }

/* Display typography — used for headline accents (warm apricot per brand system) */
.tr-display, .gradient-text {
  font-family: var(--tr-font-display);
  font-weight: 500;
  font-style: italic;
  color: var(--tr-accent);
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -0.015em;
}

/* Mono label pattern */
.tr-eyebrow {
  font-family: var(--tr-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-primary);
}

/* Hero mesh replacement — warm wash, not gradient-bomb */
.hero-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14,95,82,0.08), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(232,160,122,0.08), transparent),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(14,95,82,0.04), transparent);
}

.glass { background: rgba(251,250,246,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.glass-strong { background: rgba(251,250,246,0.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

.video-container {
  background: linear-gradient(135deg, #0E5F52 0%, #0B4A40 55%, #15201D 100%);
}

/* Numerals — tabular in stats */
.stat-number { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Focus state — warm apricot halo rather than blue ring */
:focus-visible {
  outline: 2px solid var(--tr-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection — teal tint */
::selection { background: var(--tr-primary-soft); color: var(--tr-primary); }