/* ═══════════════════════════════════════════════════════════════════
   TH-FLUENT — Trade Handy × Microsoft Fluent 2 design layer
   Fluent's system (tokens · state logic · elevation · motion),
   Trade Handy's soul (teal on deep navy).
   Loads AFTER page styles — upgrades every button, card, input
   sitewide without touching page markup.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fluent 2 global tokens, TH-branded ── */
  --fl-radius-s: 4px;          /* Fluent rectangle default */
  --fl-radius-m: 8px;          /* cards / flyouts */
  --fl-radius-pill: 999px;
  --fl-stroke: rgba(255,255,255,.14);
  --fl-stroke-focus: #00d5d9;

  /* Fluent dual-shadow elevation (key + ambient) */
  --fl-shadow-2:  0 1px 2px rgba(0,0,0,.24), 0 0 2px rgba(0,0,0,.12);
  --fl-shadow-4:  0 2px 4px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.12);
  --fl-shadow-8:  0 4px 8px rgba(0,0,0,.32), 0 0 2px rgba(0,0,0,.14);
  --fl-shadow-16: 0 8px 16px rgba(0,0,0,.36), 0 0 2px rgba(0,0,0,.16);
  --fl-shadow-brand: 0 4px 14px rgba(0,184,187,.35), 0 0 2px rgba(0,184,187,.2);

  /* Fluent motion tokens */
  --fl-dur-fast: 150ms;
  --fl-dur-normal: 250ms;
  --fl-ease: cubic-bezier(0.33, 0, 0.67, 1);        /* fluent easeEase */
  --fl-ease-decel: cubic-bezier(0, 0, 0, 1);         /* entrances */
  --fl-ease-accel: cubic-bezier(0.7, 0, 1, 0.5);     /* exits */

  /* Type ramp (Segoe UI first, graceful fallback) */
  --fl-font: 'Segoe UI Variable Text','Segoe UI',-apple-system,'Inter',system-ui,sans-serif;
  --fl-font-display: 'Segoe UI Variable Display','Segoe UI','Space Grotesk',-apple-system,sans-serif;
}

/* ── Base: Fluent type + rendering ── */
body { font-family: var(--fl-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--fl-font-display); letter-spacing: -0.02em; }

/* ── Selection + scrollbar: the small things Fluent gets right ── */
::selection { background: rgba(0,184,187,.35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,184,187,.5); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ═══ BUTTON STATE LOGIC — Fluent's rest→hover→pressed→focus on every button ═══ */
button, .btn, .btn-primary, .btn-ghost, .btn-p, .btn-g, .btn-next, .btn-back,
a[class*="btn"], input[type="submit"], .td-cb-btn, .soc, .magic {
  transition:
    transform var(--fl-dur-fast) var(--fl-ease),
    box-shadow var(--fl-dur-fast) var(--fl-ease),
    background-color var(--fl-dur-fast) var(--fl-ease),
    border-color var(--fl-dur-fast) var(--fl-ease),
    filter var(--fl-dur-fast) var(--fl-ease);
  will-change: transform;
}
/* hover: lift (Fluent elevation pattern) */
button:hover, .btn:hover, a[class*="btn"]:hover, .td-cb-btn:hover,
input[type="submit"]:hover, .soc:hover, .magic:hover {
  transform: translateY(-1px);
  box-shadow: var(--fl-shadow-8);
  filter: brightness(1.06);
}
/* pressed: settle down — the "acknowledged" feel */
button:active, .btn:active, a[class*="btn"]:active, .td-cb-btn:active,
input[type="submit"]:active, .soc:active, .magic:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--fl-shadow-2);
  filter: brightness(0.97);
  transition-duration: 50ms;
}
/* primary buttons carry the brand glow at rest */
.btn-primary, .btn-p, .btn-next, .td-cb-btn { box-shadow: var(--fl-shadow-brand); }
.btn-primary:hover, .btn-p:hover, .btn-next:hover, .td-cb-btn:hover {
  box-shadow: 0 6px 20px rgba(0,184,187,.5), 0 0 2px rgba(0,184,187,.25);
}

/* ═══ FOCUS — Fluent's signature double focus ring (keyboard users see everything) ═══ */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fl-stroke-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,184,187,.22);
  border-radius: var(--fl-radius-s);
}

/* ═══ INPUTS — Fluent underline-accent focus ═══ */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color var(--fl-dur-fast) var(--fl-ease),
              box-shadow var(--fl-dur-fast) var(--fl-ease),
              background-color var(--fl-dur-fast) var(--fl-ease);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--fl-stroke-focus) !important;
  box-shadow: 0 1px 0 0 var(--fl-stroke-focus), 0 0 0 3px rgba(0,184,187,.14) !important;
}
input::placeholder, textarea::placeholder { transition: opacity var(--fl-dur-fast) var(--fl-ease); }
input:focus::placeholder, textarea:focus::placeholder { opacity: .45; }

/* ═══ CARDS & SURFACES — layered depth, gentle hover lift ═══ */
.card, .panel, .tile, .path, .tool, .td-clientbar, [class*="card"] {
  transition: transform var(--fl-dur-normal) var(--fl-ease),
              box-shadow var(--fl-dur-normal) var(--fl-ease),
              border-color var(--fl-dur-normal) var(--fl-ease);
}
.card:hover, .panel:hover, .tile:hover, .path:hover, .tool:hover {
  box-shadow: var(--fl-shadow-16);
  border-color: rgba(0,184,187,.4);
}

/* ═══ LINKS — quiet until needed ═══ */
a { transition: color var(--fl-dur-fast) var(--fl-ease), opacity var(--fl-dur-fast) var(--fl-ease); }

/* ═══ ENTRANCE MOTION — content settles in like Fluent surfaces ═══ */
@media (prefers-reduced-motion: no-preference) {
  .card, .panel, .tile, section, .wrap > * { animation: fl-rise .45s var(--fl-ease-decel) backwards; }
  @keyframes fl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  /* stagger the first few so pages feel orchestrated, not dumped */
  section:nth-of-type(1), .wrap > *:nth-child(1) { animation-delay: .02s; }
  section:nth-of-type(2), .wrap > *:nth-child(2) { animation-delay: .07s; }
  section:nth-of-type(3), .wrap > *:nth-child(3) { animation-delay: .12s; }
  section:nth-of-type(4) { animation-delay: .17s; }
}
/* Respect users who turn motion off — Fluent rule #1 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══ ACCENT DETAILS ═══ */
/* Fluent-style acrylic top nav wherever a sticky nav exists */
.nav, nav[class] { backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); }
/* consistent corner language */
img, .card, .panel { border-radius: var(--fl-radius-m); }