/* Migronis × Borderless identity — design tokens + base styles
   ─────────────────────────────────────────────────────────────
   Black & white core. Switzer (sans) + Zodiak (serif). Swiss grid.
   Generous whitespace. Sharp edges. No glass. */

:root {
  /* ── Borderless primaries ───────────────────────────── */
  --bg: #FFFFFF;
  --bg-elev: #FFFFFF;          /* surface = same plane; differentiated by 1px rules */
  --bg-elev-solid: #FFFFFF;
  --bg-elev-2: #F4F4F2;        /* near-white tint for nested surfaces */
  --bg-invert: #191C1F;        /* Borderless primary black */
  --surface: #FFFFFF;
  --surface-hi: #F4F4F2;

  --fg: #191C1F;
  --fg-muted: #4A4D52;
  --fg-dim: #8A8D92;

  --border: #E6E6E4;
  --border-strong: #191C1F;     /* hard divider — Swiss rule */
  --border-soft: #EDEDEB;

  /* ── Borderless additional palette ──────────────────── */
  --bl-orange:  #C87D33;
  --bl-yellow:  #E6CC53;
  --bl-pink:    #E582B4;
  --bl-blue:    #02ABE3;
  --bl-green:   #1F4A2E;
  --bl-grey:    #D9D9D8;
  --bl-magenta: #4B213C;
  --bl-teal:    #608B8C;

  /* Primary accent — dark green (active, premium) */
  --accent:         var(--bl-green);
  --accent-soft:    rgba(31, 74, 46, 0.08);
  --accent-strong:  #133221;
  --danger:         #B14A37;
  --ok:             var(--bl-green);

  /* Glass tokens kept for back-compat but neutralised */
  --glass-blur: 0px;
  --glass-sat: 1;
  --glass-bg: #FFFFFF;
  --glass-bg-light: #FFFFFF;
  --glass-border: #E6E6E4;
  --glass-shadow: none;

  /* Radii — Swiss = sharp. Almost nothing. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 999px;             /* explicit when needed */

  /* Type stacks */
  --f-display: 'Zodiak', 'Times New Roman', Georgia, serif;
  --f-sans:    'Switzer', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Geist Mono', 'SF Mono', monospace;

  /* Motion */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* Inverted dark sections — Borderless allows black panels */
[data-palette="dark"],
.dark-section {
  --bg: #191C1F;
  --bg-elev: #191C1F;
  --bg-elev-solid: #191C1F;
  --bg-elev-2: #23262A;
  --surface: #191C1F;
  --surface-hi: #23262A;
  --fg: #FFFFFF;
  --fg-muted: rgba(255,255,255,0.66);
  --fg-dim: rgba(255,255,255,0.42);
  --border: rgba(255,255,255,0.12);
  --border-strong: #FFFFFF;
  --border-soft: rgba(255,255,255,0.08);
  --accent: #FFFFFF;
  --accent-soft: rgba(255,255,255,0.10);
  --accent-strong: #FFFFFF;
}

/* Back-compat: legacy palette switches now no-op visually but keep selectors valid */
[data-palette="ivory"],
[data-palette="light"],
[data-palette="gold"] { /* no overrides — borderless is the canonical look */ }
[data-glass] { /* no-op */ }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Block typography rhythm */
p { margin: 0 0 16px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 500; letter-spacing: -0.02em; }
h1 + p, h2 + p, h3 + p { margin-top: 16px; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* Ambient blobs — neutralised. Borderless prohibits graphic decoration behind type. */
.amb-blobs, .amb-blob, .amb-1, .amb-2, .amb-3 { display: none !important; }

/* Glass primitive → flat white card with 1px rule */
.glass {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.glass-thin { border-radius: 0; }

/* ── Display type ──────────────────────────────────────── */
/* Borderless headlines: HUGE Switzer Bold over imagery/slabs.
   Zodiak (serif italic) reserved for delicate accents only. */
.display {
  font-family: var(--f-sans);
  font-weight: 800;             /* Switzer ExtraBold — default heavy display */
  letter-spacing: -0.03em;
  line-height: 0.96;
  text-transform: none;
}
/* Emphasis: same weight as the parent (no thin/heavy mismatch), colour shift only.
   On light surfaces — saturated dark green. On dark surfaces — warm cream tint. */
.display em {
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
  letter-spacing: inherit;
}
.dark-section .display em,
[data-palette="dark"] .display em {
  color: rgba(255, 232, 192, 0.85);
}

/* Section accent variants — bring colour variety across sections.
   Each top-level section can opt in via [data-accent]; `.display em` shifts hue accordingly. */
[data-accent="green"]   .display em { color: #1F4A2E; }
[data-accent="teal"]    .display em { color: #2F6A6B; }
[data-accent="orange"]  .display em { color: #B36420; }
[data-accent="magenta"] .display em { color: #6E2F58; }
[data-accent="ocean"]   .display em { color: #1F4F76; }
[data-accent="rust"]    .display em { color: #8C3A1F; }

/* Em-dash inside display headlines — drop weight + a touch of opacity so
   the punctuation doesn't bowl over the words around it. */
.display .ds {
  font-weight: 300;
  letter-spacing: 0.02em;
  opacity: 0.42;
  margin: 0 0.04em;
}
.display strong, .display b {
  font-weight: 900;             /* Switzer Black */
  letter-spacing: -0.035em;
}
.display.thin {
  font-weight: 200;
  letter-spacing: -0.035em;
}

.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: 'tnum' 1;
}

.eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.kbd {
  font-family: var(--f-mono); font-size: 11px; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--bg-elev-2); color: var(--fg-muted);
}

/* Containers */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* ── Buttons — Swiss / Borderless ──────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 22px;
  border-radius: 0;
  font-family: var(--f-sans); font-size: 13px;
  font-weight: 500; letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background .2s var(--ease-out), color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--bg-invert);
  color: #FFFFFF;
  border-color: var(--bg-invert);
}
.btn-primary:hover {
  background: #000;
  border-color: #000;
}
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--bg-invert);
  color: #FFFFFF;
  border-color: var(--bg-invert);
}
.btn-line {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg);
}
.btn-line:hover {
  background: var(--bg-invert);
  color: #FFFFFF;
}
.btn-sm { height: 36px; padding: 0 14px; font-size: 11px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 13px; letter-spacing: 0.04em; }

/* Inverse-context buttons (inside .dark-section) */
.dark-section .btn-primary {
  background: #FFFFFF;
  color: var(--bg-invert);
  border-color: #FFFFFF;
}
.dark-section .btn-primary:hover { background: #F4F4F2; border-color: #F4F4F2; }
.dark-section .btn-ghost { color: #FFF; border-color: rgba(255,255,255,0.4); }
.dark-section .btn-ghost:hover { background: #FFF; color: var(--bg-invert); }

/* Pills / chips — thin 1px outline, rectangular */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 0;
  background: transparent; border: 1px solid var(--border-strong);
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-transform: uppercase;
}
/* Override any inline borderRadius: 999 — Borderless system is rectangular */
.btn[style*="border-radius: 999"],
.btn[style*="borderRadius: 999"],
.btn[style*="border-radius:999"] { border-radius: 0 !important; }
.chip-accent {
  background: var(--bg-invert);
  color: #FFFFFF;
  border-color: var(--bg-invert);
}

/* Divider — Swiss hairline */
.hr { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Card hover — subtle elevation so cards read against #FFFFFF page bg */
.lift {
  transition: border-color .25s var(--ease-out), background .25s, box-shadow .25s, transform .25s;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0 !important;
}
.lift:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 12px 32px -16px rgba(25,28,31,0.18); }

/* Card surface differentiated from page — pale tint pulls cards forward */
.card-surface {
  background: var(--bg-elev-2) !important;
  border: 1px solid var(--border) !important;
}

/* Section spacing */
.section { padding: 88px 0; position: relative; z-index: 1; }
.section-sm { padding: 60px 0; position: relative; z-index: 1; }

/* Headline scale — premium but readable (not poster-size). */
.h-1 { font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02; }
.h-2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.06; }
.h-3 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.12; }
.h-4 { font-size: 19px; line-height: 1.25; }

/* Field */
.field {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  font-family: var(--f-sans);
  font-size: 15px; color: var(--fg);
  transition: border-color .2s;
  width: 100%;
}
.field:focus-within, .field:focus { border-bottom-color: var(--bg-invert); outline: none; }
.field input, .field select, .field textarea {
  background: transparent; border: 0; color: inherit; outline: none; width: 100%; font: inherit;
}
.field input::placeholder { color: var(--fg-dim); }

/* App scaffold */
#root { position: relative; z-index: 1; }

/* Scrollbar — minimal */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Animations */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, var(--bg-elev-2) 0%, #FFFFFF 50%, var(--bg-elev-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up .5s var(--ease-out) both; }

/* Image placeholder — Borderless: monospace explainer, low-contrast hatching */
.img-ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      #F4F4F2 0 14px,
      #FFFFFF 14px 28px);
  border: 1px solid var(--border);
  border-radius: 0;
}
.img-ph::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Tabs — Borderless underline tabs */
.tabs {
  display: inline-flex; gap: 0;
  padding: 0; background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.tab {
  height: 40px; padding: 0 16px;
  border-radius: 0;
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--f-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.tab.is-active { background: transparent; color: var(--fg); border-bottom-color: var(--fg); }
.tab:not(.is-active):hover { color: var(--fg); }

/* Pill-style tabs container (used in header/lang switch) — back-compat */
.tabs[style*="border-radius: 999"],
.tabs[style*="padding: 3"],
.tabs[style*="padding: 4"] {
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Focus rings — black, not coloured */
:focus-visible { outline: 2px solid var(--bg-invert); outline-offset: 3px; border-radius: 0; }

/* Selection */
::selection { background: var(--bg-invert); color: #FFFFFF; }

/* Header sticky chrome — Borderless: transparent over hero, contrast preserved */
header > .glass {
  border-radius: 0 !important;
  background: rgba(25, 28, 31, 0.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  border-color: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 14px 32px !important;
  color: #FFFFFF;
}
header { top: 0 !important; padding: 0 !important; }
header > .glass a,
header > .glass nav button,
header > .glass .tab,
header > .glass span { color: #FFFFFF !important; }
/* Active / hovered nav tab — keep ghost background OFF so we don't get white-on-white */
header > .glass .tab,
header > .glass nav button {
  background: transparent !important;
}
header > .glass nav button:hover,
header > .glass .tab:hover {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255,255,255,0.55) !important;
}
header > .glass .tab.is-active { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; }
header > .glass .tab:not(.is-active) { color: rgba(255,255,255,0.66) !important; }
header > .glass .btn-primary {
  background: #FFFFFF !important;
  color: #191C1F !important;
  border-color: #FFFFFF !important;
}
header > .glass .btn-primary:hover {
  background: #F4F4F2 !important;
  color: #191C1F !important;
  border-color: #F4F4F2 !important;
}
header > .glass .btn-ghost {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.4) !important;
}
header > .glass .btn-ghost:hover {
  background: #FFFFFF !important;
  color: #191C1F !important;
  border-color: #FFFFFF !important;
}
/* Inner spans inside header buttons must follow the button's hover colour, not the global span override */
header > .glass .btn-ghost:hover span,
header > .glass .btn-ghost:hover * { color: #191C1F !important; }
header > .glass .btn-primary:hover span,
header > .glass .btn-primary:hover * { color: #191C1F !important; }
header > .glass .tabs {
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-bottom: 1px solid rgba(255,255,255,0.22) !important;
}

/* Force any element using --bg-elev to be flat */
[style*="var(--bg-elev)"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── Switzer "notch verticals" — display variant ───────── */
/* Per Borderless: large Switzer Thin sometimes uses notch verticals.
   We approximate via a thin underline accent for emphasis on hero. */
.display .notch {
  position: relative;
  padding-bottom: 4px;
}
.display .notch::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
}

/* Accent slabs — Borderless: text blocks can be backed by accent slabs */
.slab-orange  { background: var(--bl-orange);  color: #191C1F; }
.slab-green   { background: var(--bl-green);   color: #FFFFFF; }
.slab-teal    { background: var(--bl-teal);    color: #FFFFFF; }
.slab-pink    { background: var(--bl-pink);    color: #191C1F; }
.slab-yellow  { background: var(--bl-yellow);  color: #191C1F; }
.slab-blue    { background: var(--bl-blue);    color: #FFFFFF; }
.slab-magenta { background: var(--bl-magenta); color: #FFFFFF; }
.slab-grey    { background: var(--bl-grey);    color: #191C1F; }

/* ── Mobile / tablet responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .container, .container-wide { padding: 0 24px; }
  .section { padding: 72px 0; }
  .section-sm { padding: 44px 0; }
  .h-1 { font-size: clamp(32px, 7vw, 48px); }
  .h-2 { font-size: clamp(24px, 5.5vw, 36px); }
  [data-hero-grid] { grid-template-columns: 1fr !important; }
  .filter-bar { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  .container, .container-wide { padding: 0 20px; }
  .section { padding: 56px 0; }
  header > .glass { padding: 12px 20px !important; }
  header nav { display: none !important; }
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }
  .slab-grid,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1.3fr 1fr 1.5fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1.15fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 0.85fr 1.4fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .btn-lg { height: 50px; padding: 0 22px; font-size: 12px; }
  .filter-bar { grid-template-columns: 1fr !important; gap: 16px !important; }
  .how-grid { grid-template-columns: repeat(5, 220px) !important; overflow-x: auto; }
  .compare-table-wrap { overflow-x: auto; }
  .ai-fab { width: 50px !important; height: 50px !important; bottom: 12px !important; right: 12px !important; }
  .twk-panel { right: 8px !important; bottom: 8px !important; width: 240px !important; }
}

/* Print */
@media print {
  html, body { background: #fff !important; color: #191C1F !important; }
  body, body * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  header, footer, .amb-blobs, .twk-panel, .btn { display: none !important; }
  .glass, .lift {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: #ccc !important;
    box-shadow: none !important;
  }
  .section { padding: 16px 0 !important; }
  .display { color: #191C1F !important; }
  .mono { color: #191C1F !important; }
  .eyebrow, .chip { color: #555 !important; }
  .container-wide { max-width: 100% !important; padding: 0 12px !important; }
  @page { size: A4 landscape; margin: 12mm; }
}