/* Copyright (c) 2026 Nitin Sauran. All Rights Reserved. See LICENSE. */
/* Shared design tokens for every page (dashboard, story, About, Privacy, Terms). */
/* ── Design tokens ──────────────────────────────────────────────────────
   Light is the default look (data-theme="light" on <html>); Dark is the visitor's choice. Lime is kept
   for the one action that matters (Run scan). Priority has its own three
   colours: mint high, amber medium, grey low. The pale cards (sage, blue)
   carry dark ink in both themes. Text/background pairs clear WCAG AA. */
:root {
  --bg:        #000000;
  --card:      #161616;
  --card-2:    #1f1f1f;
  --card-3:    #2a2a2a;
  --line:      rgba(255, 255, 255, .08);
  --line-2:    rgba(255, 255, 255, .16);
  --text:      #f4f4f2;
  --text-2:    #bdbdbd;
  --text-3:    #949494;   /* 6.0:1 on --card */
  --pill:      #1b1b1b;
  --pill-on:   #ffffff;
  --pill-on-fg:#000000;
  --bar:       #2e2e2e;
  --hatch:     rgba(255, 255, 255, .30);
  --scrim:     rgba(0, 0, 0, .72);
  --shadow:    0 30px 80px rgba(0, 0, 0, .6);

  --lime:      #e6f77a;
  --sky:       #8fd3f4;
  --pink:      #f6a8ae;
  --mint:      #92e2a4;
  --hl:        #e6f77a;
  --silver:    #d0d0d0;
  --violet:    #c4a7ff;
  --peach:     #ffb38a;
  --teal:      #6ee0c8;
  --rose:      #ff8fb1;
  --sand:      #e8d3a8;
  --amber:     #f3c75b;
  --coral:     #ff7b6b;
  --sage:      #dfe8d6;
  --sage-2:    #edf2e7;
  --blue:      #c8d2e2;
  --ink:       #0b0b0b;
  --ease-out:  cubic-bezier(.23, 1, .32, 1);      /* things arriving or leaving */
  --ink-2:     #4a5047;   /* 6.9:1 on --sage */

  /* priority: chip fill, and the ring stroke on the card */
  --hi:        #92e2a4;
  --hi-ring:   #92e2a4;
  --md:        #f3c75b;
  --md-ring:   #f3c75b;
  --lo:        #2f2f2f;
  --lo-fg:     #c7c7c7;
  --lo-ring:   #6e6e6e;

  /* Inter for reading (body, chips, cards, buttons, labels); Urbanist for titles and headings */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r-card: 30px;
  --r-in:   18px;
  --gap:    16px;
  --ease: cubic-bezier(.2, .8, .2, 1);              /* hover and colour */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);     /* things moving across the screen */
  --dur-press: 140ms; --dur-pop: 180ms; --dur-ui: 300ms;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg:        #e9e9e5;
  --card:      #ffffff;
  --card-2:    #f4f4f1;
  --card-3:    #ebebe7;
  --line:      rgba(0, 0, 0, .08);
  --line-2:    rgba(0, 0, 0, .16);
  --text:      #111111;
  --text-2:    #474747;
  --text-3:    #696969;   /* 5.4:1 on white */
  --pill:      #ffffff;
  --pill-on:   #111111;
  --pill-on-fg:#ffffff;
  --bar:       #e6e6e1;
  --hatch:     rgba(0, 0, 0, .32);
  --scrim:     rgba(20, 20, 20, .5);
  --shadow:    0 30px 80px rgba(0, 0, 0, .18);
  --mint:      #2f9e4f;
  --hl:        #5d6b0f;
  --amber:     #9a6a00;
  --coral:     #c4321f;
  --hi-ring:   #2f9e4f;
  --md-ring:   #b47f00;
  --lo:        #ebebe7;
  --lo-fg:     #474747;
  --lo-ring:   #b5b5b0;
  color-scheme: light;
}


/* ── Reading pages (Privacy, Terms): the story's paper, type and 6vw edge, scrolling normally ── */
body.doc { margin: 0; background: #efede7; color: #121512; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.doc-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; height: 76px; padding: 0 6vw; background: #efede7; }
.doc-logo { display: flex; align-items: center; gap: 9px; font: 600 19px var(--font-display); letter-spacing: -.01em; color: #121512; text-decoration: none; }
.doc-logo svg { width: 24px; height: 24px; margin-left: -2.25px; }
.doc-nav { margin-left: auto; display: flex; gap: 26px; align-items: center; font: 500 14px var(--font); }
.doc-nav a { color: #474a45; text-decoration: none; }
.doc-nav a:hover, .doc-nav a[aria-current] { color: #121512; }
.doc-nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.doc main { padding: max(40px, 7vh) 6vw 0; }
.doc h1 { margin: 0 0 5vh -.06em; font: 300 clamp(96px, 20vh, 260px)/.8 var(--font-display); letter-spacing: -.045em; }
.doc .intro { max-width: 760px; margin: 0 0 7vh; font: 400 clamp(22px, 2.2vw, 34px)/1.15 var(--font-display); letter-spacing: -.02em; }
.doc section { display: grid; grid-template-columns: minmax(200px, 32%) 1fr; gap: 4vw; padding: 4vh 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.doc h2 { margin: 0; font: 500 24px var(--font-display); letter-spacing: -.01em; }
.doc section p { max-width: 680px; margin: 0 0 12px; font: 400 16px/1.65 var(--font); color: #2a2d2a; }
.doc a { color: inherit; }
.doc-foot { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 3vh; padding: 5vh 0 6vh; border-top: 1px solid rgba(0, 0, 0, .08); font: 500 14px var(--font); color: #696c66; }
.doc-foot a { text-decoration: none; }
.doc-foot span { margin-left: auto; }
@media (max-width: 700px) {
  .doc-bar { padding: 0 16px; height: 64px; }
  .doc-nav { gap: 16px; font-size: 13px; }
  .doc main { padding: 4vh 16px 0; }
  .doc section { grid-template-columns: 1fr; gap: 8px; }
  .doc-foot span { margin-left: 0; width: 100%; }
}
/* reading pages arrive as they scroll in, with the dashboard's motion (doc.js adds .pre, then .in) */
@keyframes arrive { from { opacity: 0; transform: translateY(6px); filter: blur(2px) } to { opacity: 1; transform: none; filter: none } }
.doc .pre { opacity: 0; }
.doc .pre.in { opacity: 1; animation: arrive var(--dur-ui) var(--ease-out) calc(var(--d, 0) * 70ms) both; }
/* the one highlighted phrase: the lime marker sweeps in behind it once it is on screen */
.doc .hl { color: inherit; padding: 0 .12em; margin: 0 -.06em; border-radius: .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 0% 100%; transition: background-size 700ms var(--ease-out) 300ms; }
.doc .in .hl { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .doc .hl { transition: none; background-size: 100% 100%; } }

/* thinking orbs (orbs.js): the element is its size, and its canvas (drawn at up to 2x) is scaled to fit it */
thinking-orb { display: inline-block; flex-shrink: 0; vertical-align: middle; width: 20px; height: 20px; }
thinking-orb[size="32"] { width: 32px; height: 32px; }
thinking-orb[size="64"] { width: 64px; height: 64px; }
thinking-orb canvas { display: block; width: 100%; height: 100%; }