/* ==========================================================================
   Matchside — matchside.tv shared styles (v2 design, July 2026)
   Source of truth: design_handoff_matchside_site_v2/ (Claude Design).
   The prototype used a body.ms-dark toggle; production keys the same tokens off
   prefers-color-scheme. Per-element styling stays inline in each page (the design
   is inline-styled and pixel-specified); this file carries tokens + shared
   utilities + responsive + the legal-doc + FAQ rules used across pages.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap');

/* ---- Tokens: light (default) ---------------------------------------- */
:root {
  --page: #EFEBE1;
  --surface: #FFFEFB;
  --panel: #F7F3EA;
  --ink: #1B1D1A;
  --muted: #6B665C;
  --doc: #3E3B34;
  --line: #E6E2D8;
  --green: #2C5D41;
  --link: #2C5D41;
  --accent: #CDD75A;
  --dash: #D6CEBF;
}

/* ---- Tokens: dark (follows the OS) ---------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0F0E0B;
    --surface: #14130F;
    --panel: #1C1A15;
    --ink: #F4EFE4;
    --muted: #A9A292;
    --doc: #D9D2C4;
    --line: #2A2721;
    --green: #327049;
    --link: #8FD0A6;
    --accent: #D7E24A;
    --dash: #3A362E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}
a { color: var(--link); text-decoration: none; }
a:hover { opacity: .85; }

/* ---- App-screenshot swap (light IMG vs dark IMG) -------------------- */
.ms-id { display: none !important; }
@media (prefers-color-scheme: dark) {
  .ms-id { display: block !important; }
  .ms-il { display: none !important; }
}

/* ---- Motion ---------------------------------------------------------- */
@keyframes ms-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ms-kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.ms-kb { animation: ms-kenburns 25s ease-in-out infinite alternate; }
.ms-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.ms-reveal.ms-in { opacity: 1; transform: none; }
.ms-lift { transition: transform .15s ease, box-shadow .15s ease; }
.ms-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(27,29,26,.08), 0 16px 36px rgba(27,29,26,.12); }
@media (prefers-reduced-motion: reduce) {
  .ms-kb { animation: none; }
  .ms-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Focus --------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ---- FAQ (support) -------------------------------------------------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .ms-chev { transform: rotate(45deg); }

/* ---- Legal doc pages (privacy / terms) ------------------------------ */
.ms-doc h2 {
  font: 800 26px/1.2 'Schibsted Grotesk'; letter-spacing: -0.5px; margin: 44px 0 12px;
  scroll-margin-top: 90px; display: flex; align-items: center; gap: 10px;
}
.ms-doc h2::before {
  content: ''; flex: none; width: 12px; height: 12px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(205,215,90,.3);
}
.ms-doc h3 { font: 800 18px/1.3 'Schibsted Grotesk'; margin: 24px 0 8px; }
.ms-doc p, .ms-doc li { font: 400 16.5px/1.65 'Schibsted Grotesk'; color: var(--doc); }
.ms-doc p { margin: 0 0 14px; }
.ms-doc ul { margin: 0 0 14px; padding-left: 22px; }
.ms-doc li { margin-bottom: 8px; }
.ms-doc a { text-decoration: underline; }
.ms-toc a { display: block; padding: 5px 0 5px 10px; margin-left: -12px; font: 600 14px/1.4 'Schibsted Grotesk'; color: var(--muted); border-left: 2px solid transparent; }
.ms-toc a:hover { color: var(--link); border-left-color: var(--accent); opacity: 1; }

/* ---- Hamburger (shown ≤980px) -------------------------------------- */
.ms-burger { display: none !important; }

/* ---- Shared responsive (header / nav / footer / burger / doc) ------- */
@media (max-width: 980px) {
  .ms-head { padding: 0 20px !important; }
  .ms-nav { gap: 14px !important; }
  .ms-nav a:not(.ms-cta):not(.ms-burger) { display: none; }
  .ms-burger { display: inline-flex !important; }
  .ms-foot { padding: 32px 20px 40px !important; }
  .ms-foot-row { flex-direction: column; }
  .ms-pagehead { padding: 48px 20px 40px !important; }
  .ms-contact { flex-direction: column; align-items: flex-start !important; }
  .ms-doc-grid { grid-template-columns: 1fr !important; }
  .ms-doc-grid .ms-toc { position: static !important; }
  h1.ms-h1-doc { font-size: 40px !important; letter-spacing: -1.1px !important; }
}