/* ══════════════════════════════════════════════════════════════════════
   Kanvel: the public pages ("Obsidiana")

   The landing and the six pages that say what the studio does with data,
   what it promises and how it uses AI share this sheet. The tokens are the
   console's: DESIGN.md owns them and tests/test_design_tokens.py fails when
   this file and that front matter disagree on a value (only the tokens used
   here are repeated; the console's legacy aliases and layout tokens are not).

   Vermilion (--lit) still means "a person must decide". On these pages that
   is the gate in the scene and the one step of the story where somebody signs,
   and nothing else. Dark is the default; light follows the system, and the
   switch in the header writes the person's own choice (public.js).

   No external host, no inline script, no web font from anywhere but /static.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */

/* Dark is the default. Light is first-class: [data-theme="light"] forces it,
   [data-theme="dark"] forces dark, and with neither set the system decides
   (the @media block below). The same values appear twice on purpose. */
:root {
  color-scheme: dark;

  --bg:          #0a0b0e;
  --bg-2:        #101217;
  --bg-3:        #171a21;
  --bg-4:        #1f232c;
  --line:        rgba(255,255,255,.09);
  --line-2:      rgba(255,255,255,.16);
  --text:        #eceef2;
  --text-2:      #a9aebb;
  --text-3:      #8f95a1;
  --lit:         #ff5b3a;   /* awaiting a human: the only warm colour, never decorative */
  --lit-ink:     #14090a;
  --lit-wash:    rgba(255,91,58,.12);
  --lit-text:    #ff7a5c;
  --signed:      #4ade80;
  --signed-ink:  #04210f;
  --signed-wash: rgba(74,222,128,.12);
  --info:        #8ab4ff;   /* the tour, focus and links: blue pencil */
  --info-wash:   rgba(138,180,255,.12);
  --flag:        #f5b942;
  --flag-wash:   rgba(245,185,66,.1);
  --dim:         rgb(4 5 8 / .74);
  --lift:        0 0 0 1px rgba(255,255,255,.09), 0 12px 40px -12px rgba(0,0,0,.7);

  --display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:      "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "Geist Mono", ui-monospace, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 80px;
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 22px;
  --gut: clamp(1rem, 2.6vw, 2.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f4f5f7;
  --bg-2:        #ffffff;
  --bg-3:        #eef0f3;
  --bg-4:        #e4e7ec;
  --line:        rgba(10,12,18,.1);
  --line-2:      rgba(10,12,18,.2);
  --text:        #0e1116;
  --text-2:      #424852;
  --text-3:      #586070;
  --lit:         #bb2f17;
  --lit-ink:     #ffffff;
  --lit-wash:    rgba(187,47,23,.08);
  --lit-text:    #b02a12;
  --signed:      #12703c;
  --signed-ink:  #ffffff;
  --signed-wash: rgba(18,112,60,.1);
  --info:        #1d4fb3;
  --info-wash:   rgba(29,79,179,.09);
  --flag:        #7a4f00;
  --flag-wash:   rgba(138,90,0,.1);
  --dim:         rgb(10 12 18 / .5);
  --lift:        0 0 0 1px rgba(10,12,18,.1), 0 12px 32px -14px rgba(10,12,18,.25);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:          #f4f5f7;
    --bg-2:        #ffffff;
    --bg-3:        #eef0f3;
    --bg-4:        #e4e7ec;
    --line:        rgba(10,12,18,.1);
    --line-2:      rgba(10,12,18,.2);
    --text:        #0e1116;
    --text-2:      #424852;
    --text-3:      #586070;
    --lit:         #bb2f17;
    --lit-ink:     #ffffff;
    --lit-wash:    rgba(187,47,23,.08);
    --lit-text:    #b02a12;
    --signed:      #12703c;
    --signed-ink:  #ffffff;
    --signed-wash: rgba(18,112,60,.1);
    --info:        #1d4fb3;
    --info-wash:   rgba(29,79,179,.09);
    --flag:        #7a4f00;
    --flag-wash:   rgba(138,90,0,.1);
    --dim:         rgb(10 12 18 / .5);
    --lift:        0 0 0 1px rgba(10,12,18,.1), 0 12px 32px -14px rgba(10,12,18,.25);
  }
}

/* ── Base ────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--line-2) transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--ui);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--info); color: var(--bg); }

a { color: var(--info); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.skip {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 100;
  padding: var(--s3) var(--s4); border-radius: var(--r-2);
  background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

svg.i { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── The bar ─────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) var(--gut);
  padding-top: max(var(--s2), env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.top__mark {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; color: var(--text); text-decoration: none;
  font: 600 1.05rem/1 var(--display); letter-spacing: -.02em;
}
.top__mark svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.top__end { display: flex; align-items: center; gap: var(--s2); }
.top__in, .top__back {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s3);
  color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none;
  border-radius: var(--r-2);
}
.top__in:hover, .top__back:hover { color: var(--text); background: var(--bg-3); }
/* The one way in from a page that is only read: outlined, so it is found without shouting. */
.top__ask { color: var(--text); border: 1px solid var(--line-2); }
@media (max-width: 30rem) { .top__back { display: none; } }
.tool {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  color: var(--text-2); background: none; border: 0; border-radius: var(--r-2); cursor: pointer;
}
.tool:hover { color: var(--text); background: var(--bg-3); }
.tool svg { width: 20px; height: 20px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  font: 600 15px/1 var(--ui); text-decoration: none; cursor: pointer;
  color: var(--text); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-2);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--bg-4); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--solid:hover { background: var(--text); border-color: var(--text); filter: brightness(.9); }
.btn:disabled { opacity: .55; cursor: default; }

/* ── The foot ────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: var(--s6) var(--gut) var(--s7);
  color: var(--text-3); font-size: 14px;
}
.foot__in { max-width: 1080px; margin: 0 auto; display: grid; gap: var(--s3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2); text-decoration: none;
}
.foot nav a:hover { color: var(--text); text-decoration: underline; }
.foot nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.foot p { margin: 0; }
.foot p a { color: var(--text-2); display: inline-block; padding-block: 13px; margin-block: -13px; }