/* =====================================================================
   ThermoFloe.com — Design System Tokens
   Source of truth for colors, type, space, motion, and the
   Liquid Glass system. Drop into your theme as the first stylesheet.
   ===================================================================== */

:root {
  /* -------------------- COLOR --------------------------------------- */
  --tf-ink:        #0A0A0B;           /* page background */
  --tf-ink-2:      #101013;           /* section background */
  --tf-ink-3:      #16161A;           /* card surface base */

  --tf-steel-900:  #1F1F23;           /* hairline rules deep */
  --tf-steel-700:  #2A2A2E;           /* glass panel borders */
  --tf-steel-500:  #5A5F66;           /* secondary text on dark */
  --tf-steel-300:  #8A8F98;           /* muted UI labels */
  --tf-steel-100:  #D4D4D8;           /* light dividers on light surfaces */

  --tf-bone:       #F2EFE7;           /* off-white body on black */
  --tf-paper:      #FAF7EE;           /* light section background */

  --tf-accent:     #C7A04A;           /* brass — single accent */
  --tf-accent-hi:  #E6C36A;           /* brass hover */
  --tf-accent-glow: rgba(199,160,74,.28);

  --tf-signal:     #5BE0B3;           /* success / online */
  --tf-warn:       #E5A24A;           /* form validation */
  --tf-error:      #E5544A;           /* error */

  /* -------------------- TYPE --------------------------------------- */
  --tf-font-display: "Neue Haas Grotesk Display", "Inter Display", "Inter", system-ui, sans-serif;
  --tf-font-sans:    "Inter Tight", "Inter", system-ui, sans-serif;
  --tf-font-body:    "Inter", system-ui, sans-serif;
  --tf-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --tf-fs-hero:    clamp(48px, 7vw, 112px);
  --tf-fs-h1:      clamp(40px, 5vw, 72px);
  --tf-fs-h2:      clamp(28px, 3.2vw, 44px);
  --tf-fs-h3:      clamp(22px, 2.2vw, 28px);
  --tf-fs-body:    clamp(16px, 1.1vw, 17px);
  --tf-fs-small:   clamp(13px, 0.9vw, 14px);
  --tf-fs-eyebrow: 12px;

  --tf-lh-hero: 0.95;
  --tf-lh-h1:   1.02;
  --tf-lh-h2:   1.10;
  --tf-lh-body: 1.55;

  --tf-tracking-hero:    -0.02em;
  --tf-tracking-h1:      -0.015em;
  --tf-tracking-eyebrow:  0.18em;

  /* -------------------- SPACE (8-pt baseline) --------------------- */
  --tf-s-1: 4px;   --tf-s-2: 8px;    --tf-s-3: 12px;   --tf-s-4: 16px;
  --tf-s-5: 24px;  --tf-s-6: 32px;   --tf-s-7: 48px;   --tf-s-8: 64px;
  --tf-s-9: 96px;  --tf-s-10: 128px; --tf-s-11: 160px;

  --tf-container: 1320px;
  --tf-gutter: 24px;
  --tf-outer: 32px;

  /* -------------------- RADIUS ------------------------------------ */
  --tf-r-sm:   6px;
  --tf-r-md:   12px;
  --tf-r-lg:   20px;
  --tf-r-xl:   28px;
  --tf-r-pill: 999px;

  /* -------------------- ELEVATION (dark) -------------------------- */
  --tf-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --tf-shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --tf-shadow-3: 0 30px 60px -20px rgba(0,0,0,.55);
  --tf-shadow-4: 0 60px 120px rgba(0,0,0,.60);

  /* -------------------- MOTION ------------------------------------ */
  --tf-ease-out:    cubic-bezier(0.2, 0.65, 0.2, 1);
  --tf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tf-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  --tf-d-1: 120ms;   /* micro */
  --tf-d-2: 220ms;   /* hover lift, glass refraction */
  --tf-d-3: 400ms;   /* nav reveal, modal */
  --tf-d-4: 800ms;   /* inkrise / section enter */
  --tf-d-5: 1200ms;  /* specdrop counter */
}

/* =====================================================================
   BASE
   ===================================================================== */
html { color-scheme: dark; }
body {
  background: var(--tf-ink);
  color: var(--tf-bone);
  font-family: var(--tf-font-body);
  font-size: var(--tf-fs-body);
  line-height: var(--tf-lh-body);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--tf-accent); color: var(--tf-ink); }

.tf-eyebrow {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tf-accent);
}
.tf-h1 { font-family: var(--tf-font-display); font-size: var(--tf-fs-h1); line-height: var(--tf-lh-h1); letter-spacing: var(--tf-tracking-h1); font-weight: 600; }
.tf-hero { font-family: var(--tf-font-display); font-size: var(--tf-fs-hero); line-height: var(--tf-lh-hero); letter-spacing: var(--tf-tracking-hero); font-weight: 600; }
.tf-num  { font-family: var(--tf-font-mono); font-variant-numeric: tabular-nums; }

/* =====================================================================
   LIQUID GLASS — three tiers
   ===================================================================== */

/* GLASS-01 — whisper (floating nav, badges, chips) */
.tf-glass-01 {
  position: relative;
  background: rgba(22,22,26,0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--tf-r-pill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 0 rgba(0,0,0,0.4);
}

/* GLASS-02 — lens (hero cards, CTA dock, modals) */
.tf-glass-02 {
  position: relative;
  background: rgba(22,22,26,0.42);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--tf-r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    var(--tf-shadow-3);
  overflow: hidden;
  transition: transform var(--tf-d-2) var(--tf-ease-spring),
              box-shadow var(--tf-d-2) var(--tf-ease-out);
}
.tf-glass-02::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
/* Pointer-tracked brass refraction */
.tf-glass-02::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(40% 40% at var(--mx,30%) var(--my,30%),
    rgba(199,160,74,0.18), rgba(199,160,74,0) 60%);
  transition: background var(--tf-d-2) var(--tf-ease-out);
}
.tf-glass-02:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-4); }

/* GLASS-03 — deep slab (section panels, footer pedestal) */
.tf-glass-03 {
  position: relative;
  background: rgba(16,16,19,0.62);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: var(--tf-r-xl);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    var(--tf-shadow-4);
  overflow: hidden;
}
.tf-glass-03::before {
  content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 50%;
  background: radial-gradient(circle at top left, rgba(199,160,74,0.12), transparent 60%);
  pointer-events: none;
}

/* Mobile and Safari iOS — lighter blur to keep FPS */
@media (max-width: 768px) {
  .tf-glass-02 { backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
  .tf-glass-03 { backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); }
}

/* =====================================================================
   HEATSHIMMER — hero background mesh
   ===================================================================== */
.tf-heatshimmer {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.tf-heatshimmer::before,
.tf-heatshimmer::after,
.tf-heatshimmer > span {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(80px); opacity: 0.18; mix-blend-mode: screen;
}
.tf-heatshimmer::before { background: radial-gradient(circle, var(--tf-accent) 0%, transparent 60%); top: -10%; left: -10%; animation: tf-drift-a 18s ease-in-out infinite; }
.tf-heatshimmer::after  { background: radial-gradient(circle, var(--tf-accent-hi) 0%, transparent 60%); bottom: -20%; right: -10%; animation: tf-drift-b 22s ease-in-out infinite; }
.tf-heatshimmer > span  { background: radial-gradient(circle, #8B6A2A 0%, transparent 60%); top: 30%; left: 40%; animation: tf-drift-c 20s ease-in-out infinite; opacity: 0.10; }

@keyframes tf-drift-a { 0%,100%{transform:translate(0,0)} 50%{transform:translate(8vw,6vh)} }
@keyframes tf-drift-b { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-10vw,-4vh)} }
@keyframes tf-drift-c { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4vw,-8vh)} }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.tf-btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 14px 28px; border-radius: var(--tf-r-pill);
  font-family: var(--tf-font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background var(--tf-d-2) var(--tf-ease-out),
              transform var(--tf-d-2) var(--tf-ease-spring),
              box-shadow var(--tf-d-2) var(--tf-ease-out),
              letter-spacing var(--tf-d-2) var(--tf-ease-out);
  border: 1px solid transparent;
}
.tf-btn--primary {
  background: var(--tf-accent); color: var(--tf-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 18px rgba(199,160,74,0.25);
}
.tf-btn--primary:hover { background: var(--tf-accent-hi); letter-spacing: 0.06em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 30px rgba(199,160,74,0.35); }
.tf-btn--ghost {
  background: transparent; color: var(--tf-bone);
  border-color: rgba(255,255,255,0.16);
}
.tf-btn--ghost:hover { border-color: var(--tf-accent); color: var(--tf-bone); }

/* Magnetic hook (JS attaches a transform translate based on cursor distance) */
.tf-btn[data-magnetic] { will-change: transform; }

/* =====================================================================
   FOCUS RING
   ===================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(199,160,74,0.32);
  border-radius: var(--tf-r-sm);
}

/* =====================================================================
   FORMS
   ===================================================================== */
.tf-field {
  position: relative; display: block;
  padding: 22px 16px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--tf-r-md);
  color: var(--tf-bone);
  transition: border-color var(--tf-d-2) var(--tf-ease-out), background var(--tf-d-2) var(--tf-ease-out);
  width: 100%; font-family: var(--tf-font-body); font-size: 16px;
}
.tf-field:focus { border-color: var(--tf-accent); background: rgba(255,255,255,0.06); outline: none; }
.tf-field-label {
  position: absolute; left: 16px; top: 16px;
  color: var(--tf-steel-300); font-size: 14px; pointer-events: none;
  transition: transform var(--tf-d-2) var(--tf-ease-out), color var(--tf-d-2) var(--tf-ease-out);
}
.tf-field:focus + .tf-field-label,
.tf-field:not(:placeholder-shown) + .tf-field-label {
  transform: translateY(-12px) scale(0.85);
  color: var(--tf-accent);
}

/* =====================================================================
   MOTION PRIMITIVES (CSS reveal classes; GSAP overrides as needed)
   ===================================================================== */
.tf-inkrise { opacity: 0; transform: translateY(24px); transition: opacity var(--tf-d-4) var(--tf-ease-out), transform var(--tf-d-4) var(--tf-ease-out); }
.tf-inkrise.is-in { opacity: 1; transform: none; }

.tf-reveal-image { opacity: 0; transform: translateY(20px) scale(1.02); transition: opacity var(--tf-d-4) var(--tf-ease-out), transform var(--tf-d-4) var(--tf-ease-out), filter var(--tf-d-4) var(--tf-ease-out); filter: grayscale(100%); }
.tf-reveal-image.is-in { opacity: 1; transform: none; filter: grayscale(0%); }
@media (prefers-reduced-motion: reduce) { .tf-reveal-image { transform: none; } }

/* =====================================================================
   ACCESSIBILITY OVERRIDES
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .tf-heatshimmer { display: none; }
  .tf-glass-02::after { background: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tf-glass-01, .tf-glass-02, .tf-glass-03 {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--tf-ink-3);
  }
}

/* =====================================================================
   POINTER REFRACTION HOOK — drop into Bricks code block or theme JS
   ---------------------------------------------------------------------
   document.querySelectorAll('.tf-glass-02').forEach(el => {
     el.addEventListener('pointermove', e => {
       const r = el.getBoundingClientRect();
       el.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
       el.style.setProperty('--my', ((e.clientY - r.top)  / r.height * 100) + '%');
     });
   });
   ===================================================================== */