/* YNET Plus Studio design system — v1 */

@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/schibsted-400.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700;
  font-display:swap; src:url('fonts/schibsted-700.woff2') format('woff2');
}
@font-face{
  font-family:'Fragment Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/fragment-mono.woff2') format('woff2');
}

:root{
  /* color — light (default) */
  --bg:            oklch(1 0 0);            /* pure white, no hidden warmth */
  --surface:       oklch(0.97 0.004 75);
  --ink:           oklch(0.22 0.015 75);
  --muted:         oklch(0.46 0.02 75);
  --line:          oklch(0.90 0.008 75);
  --amber:         oklch(0.75 0.155 75);    /* the studio anchor — ≤10% of any surface */
  --amber-deep:    oklch(0.52 0.115 75);    /* links / text-safe amber on white */
  --ok-bg:         oklch(0.93 0.05 145);
  --ok-ink:        oklch(0.34 0.09 150);
  --build-bg:      oklch(0.95 0.055 75);
  --build-ink:     oklch(0.42 0.10 70);
  --proto-bg:      oklch(0.94 0.006 75);

  /* type */
  --font-display:  'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:     'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:     'Fragment Mono', ui-monospace, monospace;

  /* type scale (1.25 modular) */
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 19px;
  --fs-lg: 24px; --fs-xl: 30px; --fs-2xl: 38px; --fs-3xl: 48px;

  /* radius + space */
  --r-tile: 7px; --r-card: 12px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* theme primitives — the ONE place dark/light values live, so the OS media
     query and the manual data-theme override both read the same source (no drift) */
  --light-bg:         oklch(1 0 0);
  --light-surface:    oklch(0.97 0.004 75);
  --light-ink:        oklch(0.22 0.015 75);
  --light-muted:      oklch(0.46 0.02 75);
  --light-line:       oklch(0.90 0.008 75);
  --light-amber-deep: oklch(0.52 0.115 75);
  --light-ok-bg:      oklch(0.93 0.05 145);
  --light-ok-ink:     oklch(0.34 0.09 150);
  --light-build-bg:   oklch(0.95 0.055 75);
  --light-build-ink:  oklch(0.42 0.10 70);
  --light-proto-bg:   oklch(0.94 0.006 75);

  --dark-bg:         oklch(0.15 0.008 75);
  --dark-surface:    oklch(0.19 0.01 75);
  --dark-ink:        oklch(0.93 0.01 75);
  --dark-muted:      oklch(0.66 0.02 75);
  --dark-line:       oklch(0.30 0.012 75);
  --dark-amber-deep: oklch(0.79 0.14 75);
  --dark-ok-bg:      oklch(0.30 0.05 150);
  --dark-ok-ink:     oklch(0.85 0.07 148);
  --dark-build-bg:   oklch(0.32 0.06 75);
  --dark-build-ink:  oklch(0.87 0.09 78);
  --dark-proto-bg:   oklch(0.26 0.008 75);
}

/* color — dark (first-class, not an inversion). Two ways in: the OS media
   query (auto, zero JS) OR a stamped [data-theme] (manual, wins either
   direction — see the override block below, which has higher specificity
   than this media query regardless of source order). */
@media (prefers-color-scheme: dark){
  :root{
    --bg: var(--dark-bg); --surface: var(--dark-surface); --ink: var(--dark-ink);
    --muted: var(--dark-muted); --line: var(--dark-line); --amber-deep: var(--dark-amber-deep);
    --ok-bg: var(--dark-ok-bg); --ok-ink: var(--dark-ok-ink);
    --build-bg: var(--dark-build-bg); --build-ink: var(--dark-build-ink);
    --proto-bg: var(--dark-proto-bg);
  }
}

/* manual override — a stamped data-theme always wins over prefers-color-scheme,
   in BOTH directions, because [data-theme] adds specificity the media query can't beat */
:root[data-theme="dark"]{
  --bg: var(--dark-bg); --surface: var(--dark-surface); --ink: var(--dark-ink);
  --muted: var(--dark-muted); --line: var(--dark-line); --amber-deep: var(--dark-amber-deep);
  --ok-bg: var(--dark-ok-bg); --ok-ink: var(--dark-ok-ink);
  --build-bg: var(--dark-build-bg); --build-ink: var(--dark-build-ink);
  --proto-bg: var(--dark-proto-bg);
}
:root[data-theme="light"]{
  --bg: var(--light-bg); --surface: var(--light-surface); --ink: var(--light-ink);
  --muted: var(--light-muted); --line: var(--light-line); --amber-deep: var(--light-amber-deep);
  --ok-bg: var(--light-ok-bg); --ok-ink: var(--light-ok-ink);
  --build-bg: var(--light-build-bg); --build-ink: var(--light-build-ink);
  --proto-bg: var(--light-proto-bg);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-base);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-0.02em; font-weight:700}
p{margin:0}

/* ---- primitives ---- */
.label{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
.pill{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.05em;
  padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; display:inline-block;
}
.pill--live{background:var(--ok-bg); color:var(--ok-ink)}
.pill--build{background:var(--build-bg); color:var(--build-ink)}
.pill--proto{background:var(--proto-bg); color:var(--muted)}

.registry{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.registry thead th{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-align:left; font-weight:400; padding:0 14px 10px 2px; border-bottom:1px solid var(--ink);
}
.registry tbody td{padding:14px 14px 14px 2px; border-bottom:1px solid var(--line); font-size:var(--fs-base)}
.registry .co{font-weight:700; display:flex; align-items:center; gap:10px}
.registry a.co{color:inherit; text-decoration:none}
.registry a.co:hover{color:var(--amber-deep)}
.registry td.mono{font-family:var(--font-mono); font-size:12.5px; color:var(--muted)}
.pmark{width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:700;flex:none}

/* =============================================================
   v0.2 — D2 additions: buttons, nav, footer, activity accent, layout
   ============================================================= */

/* layout grammar */
.container{max-width:1080px; margin:0 auto; padding-left:24px; padding-right:24px}
.section{padding-top:var(--sp-7); padding-bottom:var(--sp-7)}   /* 48px mobile */
@media(min-width:820px){ .section{padding-top:96px; padding-bottom:96px} }
.section--tight{padding-top:var(--sp-6); padding-bottom:var(--sp-6)}

/* buttons + links */
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm);
  text-decoration:none; border-radius:8px; padding:12px 22px; border:1.5px solid transparent; cursor:pointer;
}
.btn--primary{background:var(--ink); color:var(--bg)}
.btn--primary:hover{background:oklch(0.32 0.02 75)}
@media (prefers-color-scheme: dark){ .btn--primary:hover{background:oklch(0.82 0.01 75)} }
:root[data-theme="dark"] .btn--primary:hover{background:oklch(0.82 0.01 75)}
:root[data-theme="light"] .btn--primary:hover{background:oklch(0.32 0.02 75)}
.btn--secondary{border-color:var(--line); color:var(--ink); background:transparent}
.btn--secondary:hover{border-color:var(--ink)}
.btn:focus-visible, .link:focus-visible, a:focus-visible, .theme-toggle:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.link{color:var(--amber-deep); font-weight:700; text-decoration:none; border-bottom:2px solid var(--amber)}
.link:hover{border-bottom-width:3px}

/* theme toggle control (nav) */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; margin:0; flex:none;
  border:1.5px solid var(--line); border-radius:8px; background:transparent;
  color:var(--ink); cursor:pointer; font-size:15px; line-height:1; font-family:var(--font-body);
}
.theme-toggle:hover{border-color:var(--ink)}

/* mark theme swap — two <img> per lockup, only the active theme's is shown.
   Specificity of the [data-theme] rules beats both the base rule and the OS
   media query, so a manual choice always wins over prefers-color-scheme. */
.mark{display:inline-flex}
.mark-dark{display:none}
@media (prefers-color-scheme: dark){
  .mark-light{display:none}
  .mark-dark{display:inline}
}
:root[data-theme="dark"] .mark-light{display:none}
:root[data-theme="dark"] .mark-dark{display:inline}
:root[data-theme="light"] .mark-light{display:inline}
:root[data-theme="light"] .mark-dark{display:none}

/* site nav */
.site-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:18px}
.site-nav .lockup{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-0.01em; color:var(--ink); text-decoration:none}
.site-nav .links{display:flex; gap:24px; align-items:center; font-size:var(--fs-sm)}
.site-nav .links a{color:var(--muted); text-decoration:none}
.site-nav .links a:hover{color:var(--ink)}
/* one-pager nav: anchors hidden below 820px, CTA always visible, no hamburger */
@media(max-width:819px){
  .site-nav .links a:not(.btn){display:none}
}

/* site footer */
.site-footer{border-top:1px solid var(--line); padding-top:var(--sp-6); padding-bottom:var(--sp-6); font-size:var(--fs-sm); color:var(--muted)}
.site-footer .cols{display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:center; justify-content:space-between}
.site-footer a{color:var(--muted); text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.site-footer .legal{margin-top:var(--sp-4); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em}

/* activity accent — the ONE Night Shift survivor. Rules:
   max one instance per page · max 3 lines · never the hero ·
   footer-adjacent or aside placement only */
.activity{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  padding:14px 18px; max-width:560px;
}
.activity .head{display:flex; align-items:center; gap:8px}
.activity .beacon{width:7px; height:7px; border-radius:50%; background:var(--amber); animation:beacon 2.4s ease-out infinite}
@keyframes beacon{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){ .activity .beacon{animation:none} }
.activity .lines{margin-top:10px; font-family:var(--font-mono); font-size:12px; line-height:1.9; color:var(--muted)}
.activity .lines b{color:var(--amber-deep); font-weight:400}

/* dark-surface fixes: product chips keep their real brand colors but get a
   hairline so dark chips (YNET+ navy) don't sink into the near-black bg */
@media (prefers-color-scheme: dark){
  .pmark{box-shadow:inset 0 0 0 1px oklch(1 0 0 / .22)}
  .registry thead th{border-bottom-color:var(--dark-ink)}
}
:root[data-theme="dark"] .pmark{box-shadow:inset 0 0 0 1px oklch(1 0 0 / .22)}
:root[data-theme="dark"] .registry thead th{border-bottom-color:var(--dark-ink)}
:root[data-theme="light"] .pmark{box-shadow:none}
:root[data-theme="light"] .registry thead th{border-bottom-color:var(--light-ink)}

/* hero (page-specific sizing, kept with the primitives it depends on) */
.hero h1{font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; max-width:20ch}
.hero .sub{font-size:var(--fs-md); line-height:1.6; max-width:56ch; margin-top:18px; color:var(--muted)}
.how{display:grid; gap:var(--sp-5); margin-top:var(--sp-5)}
@media(min-width:820px){ .how{grid-template-columns:1fr 1fr 1fr} }
.how h3{font-size:var(--fs-md)}
.how p{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin-top:8px; max-width:38ch}
.how .k{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--amber-deep); letter-spacing:.06em}