/* ClaimWard design system — canonical tokens (reuse seed for @claimward/ui, M1 capture, M3 verify)
   "Forensic instrument": dark-first evergreen, mono as a co-lead, colour encodes the assurance ladder.
   Brass is reserved for L3 "qualified" and must never render where a QTSP hasn't signed. */

/* Real brand fonts (Schibsted Grotesk / Geist / Geist Mono) drop in here as self-hosted woff2:
   @font-face{font-family:"Schibsted Grotesk";src:url("fonts/SchibstedGrotesk.woff2") format("woff2");font-weight:600 700;font-display:swap}
   Until then we fall back to tuned system stacks (below) so the site ships with zero external requests. */

:root{
  /* evergreen spine */
  --ever-950:#071512; --ever-900:#0A251E; --ever-800:#0E3A2E; --ever-700:#115C46;
  --ever-600:#16795C; --ever-500:#1E9E77; --ever-400:#3FBF97; --ever-300:#74D9B8;
  --ever-200:#A9EAD3; --ever-100:#D7F5EA; --ever-50:#EEFBF5;
  /* live signal — capture meters only */
  --live:#4FE6B4; --live-glow:0 0 24px rgba(79,230,180,.45);
  /* brass — L3 qualified ONLY, earned */
  --seal-700:#7A5A2E; --seal-500:#B8894B; --seal-300:#E4B876;
  /* functional alert — tamper mismatch */
  --alert:#D9483B;

  /* dark (default) */
  --bg:#08120F; --surface:#0D1F1A; --elevated:#123027;
  --ink:#E6F0EC; --muted:#7E938C; --hairline:rgba(79,230,180,.16); --hairline-strong:rgba(79,230,180,.28);
  --accent:var(--ever-500); --accent-ink:var(--ever-300); --accent-fill:var(--ever-700);
  --shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 20px 60px -24px rgba(0,0,0,.7);

  /* type */
  --f-display:"Schibsted Grotesk","Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-text:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono","IBM Plex Mono",ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  /* scale 12·14·16·20·25·40·64·96 */
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-md:20px; --t-lg:25px; --t-xl:40px; --t-2xl:64px; --t-3xl:96px;

  /* space */
  --sp:4px; --container:1200px; --radius-chip:2px; --radius:8px; --radius-lg:12px;
}
:root[data-theme="light"]{
  --bg:#F5F8F7; --surface:#FFFFFF; --elevated:#EEFBF5;
  --ink:#16211E; --muted:#5B6B66; --hairline:rgba(17,92,70,.14); --hairline-strong:rgba(17,92,70,.26);
  --accent:var(--ever-600); --accent-ink:var(--ever-700); --accent-fill:var(--ever-600);
  --shadow:0 1px 2px rgba(16,40,32,.06),0 18px 50px -28px rgba(16,40,32,.28);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F5F8F7; --surface:#FFFFFF; --elevated:#EEFBF5;
  --ink:#16211E; --muted:#5B6B66; --hairline:rgba(17,92,70,.14); --hairline-strong:rgba(17,92,70,.26);
  --accent:var(--ever-600); --accent-ink:var(--ever-700); --accent-fill:var(--ever-600);
  --shadow:0 1px 2px rgba(16,40,32,.06),0 18px 50px -28px rgba(16,40,32,.28);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:var(--t-base);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--ever-500);color:#04120D}
a{color:var(--accent-ink);text-decoration:none}
.mono{font-family:var(--f-mono);font-feature-settings:"ss01";letter-spacing:.02em}
:focus-visible{outline:2px solid var(--ever-400);outline-offset:3px;border-radius:4px}

/* ---- The Ward — the ownable motif: viewfinder corners that seal into a frame ---- */
.ward{position:relative;display:block}
.ward > .ward-in{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--elevated)}
.ward::before,.ward::after,.ward > .c1,.ward > .c2{content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--ever-400);z-index:3;pointer-events:none;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.ward::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:4px}
.ward::after{top:-1px;right:-1px;border-left:0;border-bottom:0;border-top-right-radius:4px}
.ward > .c1{bottom:-1px;left:-1px;border-right:0;border-top:0;border-bottom-left-radius:4px}
.ward > .c2{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:4px}
/* sealed state — brackets close into a full hairline frame + registration notch */
.ward.sealed::before,.ward.sealed::after,.ward.sealed > .c1,.ward.sealed > .c2{width:calc(50% + 1px);height:calc(50% + 1px);border-color:var(--ever-500)}
.ward.sealed > .ward-in{box-shadow:0 0 0 1px var(--ever-600)}
.ward.brass::before,.ward.brass::after,.ward.brass > .c1,.ward.brass > .c2{border-color:var(--seal-500)}
.ward.brass.sealed > .ward-in{box-shadow:0 0 0 1px var(--seal-500)}
.ward .cap{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.02em;padding:7px 2px 0;display:block}
.ward .cap b{color:var(--ever-300);font-weight:500}

/* ---- primitives ---- */
.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);font-weight:500;display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--ever-500)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.03em;padding:4px 9px;border-radius:var(--radius-chip);border:1px solid var(--hairline);color:var(--muted);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.chip.live{color:var(--live);border-color:color-mix(in srgb,var(--live) 40%,transparent)}
.chip.l2{color:var(--ever-300);border-color:color-mix(in srgb,var(--ever-400) 40%,transparent)}
.chip.brass{color:var(--seal-300);border-color:color-mix(in srgb,var(--seal-500) 45%,transparent)}
.chip.demo{color:var(--muted);border-style:dashed}
.chip.alert{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 45%,transparent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-text);
  font-size:15px;font-weight:600;padding:13px 22px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease,filter .15s ease,background .15s ease;line-height:1;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ever-500);color:#04120D}
.btn-solid:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
.btn-ghost:hover{border-color:var(--ever-400);color:var(--ever-200)}
.btn svg{width:17px;height:17px}