/* ═══════════════════════════════════════════════════════════════════════════
   FAK LAB — SWISS UNIFIED OVERRIDES
   One coherent Swiss International Style layer over the whole site.
   Loaded AFTER every page's own stylesheets (and after swiss-tokens.css).
   Overrides visually only — Bootstrap and existing files stay untouched.
   v=20260923-swiss1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1 · Base typography ─────────────────────────────────────────────── */
body {
  font-family: var(--sw-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  letter-spacing: var(--sw-track-tight);
  line-height: var(--sw-leading-head);
  text-wrap: balance;
}
p, li { line-height: var(--sw-leading-body); }

/* Tabular numerals wherever stats appear */
.num, #statToolCount, .hub-count, .cp-index, .stat-value,
.t-stat b, .t-stat strong, [data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── §2 · One accent — remap every surface's accent variable ──────────── */
:root {
  --home-accent: var(--sw-accent);
  --home-accent-2: var(--sw-accent);
  --primary: var(--sw-accent);
  --primary-dark: var(--sw-accent-deep);
  --primary-light: var(--sw-accent);
  --purple: var(--sw-accent);
  --sw-violet: var(--sw-accent);
  --ts-violet: var(--sw-accent);
}

/* ── §3 · Swiss signatures: kickers, rules, numbered markers ─────────── */
.sw-kicker {
  display: block;
  margin: 0 0 var(--sw-s4);
  font-size: var(--sw-kicker);
  font-weight: 800;
  letter-spacing: var(--sw-track-kicker);
  text-transform: uppercase;
  color: var(--sw-accent);
}
.sw-rule { border: 0; border-top: var(--sw-hairline-strong); margin: var(--sw-s8) 0; }

/* Opt-in numbered sections: <section class="sw-numbered"> … <h2>… */
.sw-numbered { counter-reset: sw-num; }
.sw-numbered > h2::before,
.sw-numbered > div > h2::before {
  counter-increment: sw-num;
  content: counter(sw-num, decimal-leading-zero) " — ";
  color: var(--sw-accent);
  font-size: .55em;
  font-weight: 800;
  letter-spacing: .08em;
  vertical-align: .35em;
}

/* ── §4 · Modular bordered cards — no rounded pastel cards ───────────── */
.t-card,
.tool-card-item,
.flagship-card,
.stat-card,
.card {
  border-radius: var(--sw-radius) !important;
  box-shadow: none !important;
}
.tool-card-item:hover,
.flagship-card:hover,
.t-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Card media stays square inside cards */
.t-card img, .tool-card-item img, .flagship-card img { border-radius: 0 !important; }

/* ── §5 · Buttons, inputs, badges — square, hairline ──────────────────── */
.t-btn, .hero-btn, .tool-launch-btn, .btn, .cp-btn,
button.t-copy-btn, .hub-filter {
  border-radius: var(--sw-radius) !important;
}
/* Primary buttons: flat accent, no gradient, no glow */
.hero-btn-primary {
  background: var(--sw-accent) !important;
  box-shadow: none !important;
  border: 1px solid var(--sw-accent-deep);
}
.hero-btn:hover { transform: none !important; box-shadow: none !important; }

.t-input, .t-textarea, .t-select,
.form-control, .form-select {
  border-radius: var(--sw-radius) !important;
}
.t-input:focus, .t-textarea:focus, .t-select:focus,
.form-control:focus, .form-select:focus {
  box-shadow: none !important;
  outline: 2px solid var(--sw-accent);
  outline-offset: 1px;
}
.t-badge, .badge {
  border-radius: var(--sw-radius) !important;
}
.drop-zone, #theme-toggle, .theme-switcher-btn {
  border-radius: var(--sw-radius) !important;
}

/* "NEW" pill was a second (pink) accent — fold it into the one accent */
.tool-card-item[data-new="true"]::after {
  border-radius: 0 !important;
  background: var(--sw-accent-soft) !important;
  color: var(--sw-accent-deep) !important;
  border: 1px solid var(--sw-accent) !important;
}

/* Range/check accent follows the single accent */
.t-range, .t-check { accent-color: var(--sw-accent); }

/* ── §6 · Homepage flagship — flat over gradient ──────────────────────── */
.hero-btn-primary { background: var(--sw-accent); }
.boot-progress { background: var(--sw-accent); box-shadow: none; }

/* ── §7 · Tool pages (tools/tool-base.css) ────────────────────────────── */
.tool-header .t-back { border-radius: 0; }
.t-kbd {
  border-radius: 0;
  border: 1px solid var(--sw-rule-soft);
  box-shadow: none;
  font-family: var(--sw-font-mono);
}

/* ── §8 · 404 — Swiss treatment of the cyber page ─────────────────────── */
.glitch { font-family: var(--sw-font); letter-spacing: var(--sw-track-tight); }
.glitch::before, .glitch::after { display: none; } /* no RGB-split glitch */
body .grid-bg {
  background-image:
    linear-gradient(color-mix(in srgb, currentColor 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, currentColor 7%, transparent) 1px, transparent 1px);
}
body .btn-home {
  border-radius: 0;
  border: 1px solid var(--sw-accent);
  background: var(--sw-accent);
  color: #fff;
  font-family: var(--sw-font);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .15s ease;
}
body .btn-home:hover { background: var(--sw-accent-deep); }
body h2.fourohfour-sub, body .content h2 {
  font-family: var(--sw-font);
  color: var(--sw-gray-500);
}

/* ── §9 · Dark theme coherence ────────────────────────────────────────── */
[data-bs-theme="dark"] .tool-card-item[data-new="true"]::after {
  background: var(--sw-accent-soft) !important;
  color: var(--sw-accent-deep) !important;
}

/* ── §10 · Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}