/* chrome.css — the SINGLE SOURCE for SnipSound's visual foundation (T-011).
   Linked in every page's <head> BEFORE theme.js so it applies at first paint (no FOUC/CLS).
   Do NOT copy these rules into a page's <style> — edit them HERE.
   theme.js keeps the INTERACTIVE chrome only (Free-Tools dropdown, mobile toggles, and the
   [data-theme="light"] token flips). Bump ?v= on every page that links this when it changes;
   scripts/check_drift.py guards the version like it does theme.js. */

/* self-hosted Inter (same-origin => COEP-safe) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter/inter-700.woff2') format('woff2')}

/* design tokens (dark = default; theme.js flips these under [data-theme="light"]) */
:root {
  --bg: #0a0a0f; --surface: #14141f; --surface2: #1e1e2e;
  --border: rgba(255,255,255,0.08); --border-bright: rgba(255,255,255,0.15);
  --text: #f0f0f5; --text-dim: #8888a0;
  --accent: #7c6fff; --accent-hover: #9184ff;
  --accent-glow: rgba(124,111,255,0.3); --accent-subtle: rgba(124,111,255,0.08);
  --green: #4caf50; --orange: #ff9800; --red: #f44336;
}

/* reset + base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }

/* header / nav chrome */
.header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(124,111,255,0.03) 0%, transparent 100%); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; }
.header-left { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 1.25rem; font-weight: 700; color: var(--text); text-decoration: none; }
.logo span { color: var(--accent); }
.header-subtitle { color: var(--text-dim); font-size: 0.85rem; border-left: 1px solid var(--border); padding-left: 12px; }
.header-nav { display: flex; gap: 20px; }
.header-nav a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.header-nav a:hover { color: var(--text); }

/* footer */
.footer { text-align: center; padding: 24px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.8rem; }
.footer a { color: var(--accent); text-decoration: none; }

/* tool subnav (the horizontal tool strip under the main nav) */
.tools-subnav { background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tools-subnav::-webkit-scrollbar { display: none; }
.tools-subnav-inner { display: flex; align-items: center; gap: 2px; max-width: 1080px; margin: 0 auto; padding: 6px 24px; white-space: nowrap; }
.tools-subnav a { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--text-dim); border-radius: 8px; text-decoration: none; transition: color 0.15s, background 0.15s; position: relative; }
.tools-subnav a:hover { color: var(--text); background: var(--accent-subtle); }
.tools-subnav a.active { color: var(--text); }
.tools-subnav a.active::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -7px; height: 2px; background: var(--accent); border-radius: 2px; }
.tools-subnav .badge-new { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; font-weight: 700; background: var(--green); color: #fff; border-radius: 3px; letter-spacing: 0.5px; vertical-align: 1px; }

/* mobile chrome */
@media (max-width: 700px) {
  .header { flex-direction: column; gap: 10px; padding: 8px 12px; }
  .header-nav { gap: 14px; }
  .tools-subnav-inner { padding: 6px 12px; }
  .tools-subnav a { padding: 9px 12px; font-size: 13px; }
}
