/* ==========================================================================
   Termoire marketing site — global stylesheet
   Inline element styles (preserved from the design) handle layout; this file
   holds: self-hosted font faces, the default token set (overridden live by
   palettes.js), base elements, keyframes, scrollbars, responsive rules, and
   the :hover states (which inline styles can't express).
   ========================================================================== */

/* --- Self-hosted JetBrains Mono (latin) --- */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/jetbrains-mono-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-800.woff2") format("woff2"); }

/* --- Default tokens (Filament Dark). palettes.js overrides these on :root
       synchronously before paint; these are the no-JS / pre-script fallback. --- */
:root {
  --bg: rgb(14,15,18); --bg-glass: rgba(14,15,18,0.72); --bg-raised: rgb(23,24,27);
  --surface: rgb(27,28,31); --surface-hover: rgb(38,39,42); --surface-inset: rgb(18,19,22);
  --fill: rgba(230,231,235,0.05); --fill-strong: rgba(230,231,235,0.09);
  --separator: rgba(230,231,235,0.08); --hairline: rgba(230,231,235,0.07); --bevel: rgba(255,255,255,0.06);
  --text-primary: rgb(230,231,235); --text-secondary: rgb(157,158,161);
  --text-tertiary: rgb(113,114,118); --text-quaternary: rgb(79,80,83);
  --accent: rgb(245,158,44); --accent-pressed: rgb(201,130,36); --accent-soft: rgba(245,158,44,0.16);
  --accent-softer: rgba(245,158,44,0.09); --accent-border: rgba(245,158,44,0.55); --accent-glow: rgba(245,158,44,0.30);
  --on-accent: rgba(255,255,255,0.96); --green: rgb(87,217,163); --green-soft: rgba(87,217,163,0.15);
  --yellow: rgb(231,180,80); --red: rgb(240,108,108); --blue: rgb(106,168,245);
  --magenta: rgb(199,146,234); --cyan: rgb(79,201,214); --white: rgb(198,200,207);
}

/* --- Base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: radial-gradient(72% 44% at 50% -6%, var(--accent-softer), transparent 61%), var(--bg);
  background-attachment: fixed;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--accent-soft); color: var(--text-primary); }

/* Accessible focus ring (keyboard only). */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Keyframes --- */
@keyframes tm-pop { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes tm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- Scrollbars (theme panel + terminal body) --- */
[data-tm-panel]::-webkit-scrollbar { width: 8px; }
[data-tm-panel]::-webkit-scrollbar-thumb { background: var(--fill-strong); border-radius: 6px; }
[data-tm-scroll]::-webkit-scrollbar { width: 9px; height: 9px; }
[data-tm-scroll]::-webkit-scrollbar-thumb { background: var(--fill-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
[data-tm-scroll]::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); background-clip: padding-box; }
[data-tm-scroll]::-webkit-scrollbar-track { background: transparent; }

/* --- Nav responsive --- */
[data-nav-menu] { display: none; }
@media (max-width: 700px) {
  [data-nav-links] { display: none !important; }
  [data-nav-menu] { display: inline-flex !important; }
  [data-nav-cta] { display: none !important; }
}
@media (max-width: 470px) {
  [data-theme-name] { display: none !important; }
}

/* --- Hover states (converted from the design's inline hover attributes) --- */
.nav-link { transition: color 0.15s; }
.nav-link:hover:not(.is-active) { color: var(--text-primary); }
.menu-link { transition: background 0.12s; }
.menu-link:hover { background: var(--surface-hover); }
.icon-btn, .theme-btn { transition: background 0.15s, border-color 0.15s; }
.icon-btn:hover { border-color: var(--accent-border); }
.theme-btn:hover { background: var(--surface-hover); border-color: var(--accent-border); }
.theme-row { transition: background 0.12s; }
.theme-row:hover { background: var(--surface-hover); }

.footer-link { transition: color 0.15s; }
.footer-link:hover { color: var(--accent); }

.hero-link { transition: color 0.15s, border-color 0.15s; }
.hero-link:hover { color: var(--accent); border-color: var(--hairline); }

.arrow-link { transition: gap 0.15s, color 0.15s; }
.arrow-link:hover { gap: 12px; }

.feature-card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: inset 0 1px 0 var(--bevel), 0 20px 42px -24px rgba(0,0,0,0.75); }

.theme-card { transition: transform 0.18s ease, border-color 0.18s ease; }
.theme-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }

.chip { transition: background 0.15s, color 0.15s, border-color 0.15s; }
.chip:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }

.mailto-lg { transition: text-decoration 0.15s; }
.mailto-lg:hover { text-decoration: underline; }

.text-link { transition: color 0.15s; }
.text-link:hover { color: var(--accent); }

/* --- App Store badge (official Apple artwork) --------------------------------
   Two variants ship; show the legible one per theme brightness. Default (no
   data-theme-dark yet, or the default filament-dark) is the white badge; light
   palettes flip to the black badge. */
.as-badge { transition: transform 0.15s ease, opacity 0.15s ease; }
.as-badge:hover { transform: translateY(-1px); opacity: 0.9; }
.as-badge-white { display: block; }
.as-badge-black { display: none; }
:root[data-theme-dark="0"] .as-badge-white { display: none; }
:root[data-theme-dark="0"] .as-badge-black { display: block; }

/* --- FAQ accordion (progressive enhancement; open without JS) --- */
.faq-answer { padding-bottom: 20px; }
.faq-ready .faq-answer { max-height: 0; opacity: 0; padding-bottom: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.28s ease, padding 0.3s ease; }
.faq-ready .faq-item.is-open .faq-answer { max-height: 360px; opacity: 1; padding-bottom: 20px; }
.faq-icon { transition: transform 0.25s ease, color 0.2s ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .faq-ready .faq-answer { transition: none; }
  .faq-icon { transition: none; }
}

/* --- Scroll reveal (progressive enhancement; visible without JS) --- */
.reveal-init [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-init [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-init [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}