/* VASE 3D landing: ONE shared system, derived from the Studio workspace (web/src/style.css, v/workspace/TOKENS.md).
   ADDITIVE. Link it AFTER /v/_base.css (fonts + --ink/--green tokens live there):
     <link rel="stylesheet" href="/v/_base.css"><link rel="stylesheet" href="/v/system/system.css">
   It only defines new --t-* / --s-* / --r-* / --e-* / --vs-* names and opt-in .vs-* classes, plus the "browser
   surfaces" (selection, caret, scrollbar, focus ring), which apply page-wide once linked. Nothing here restyles an
   element that does not opt in, except those browser surfaces. */

:root {
  /* ---------- colour (fallbacks mirror _base.css so the file also works alone) ---------- */
  --vs-ink: var(--ink, #101713);
  --vs-ink-2: var(--ink-2, #3a423d);
  --vs-muted: var(--muted, #646d67);              /* 5.4:1 on white, 5.0:1 on --vs-alt. Captions use this, never lighter. */
  --vs-line: var(--line, rgb(16 23 19 / .10));
  --vs-line-2: var(--line-2, rgb(16 23 19 / .16));
  --vs-alt: var(--alt, #f4f6f4);
  --vs-green: var(--green, #1fbf72);              /* FILL ONLY (2.4:1 on white) */
  --vs-green-ink: var(--green-ink, #0d7a4a);      /* green as text/rings, 5.4:1 */
  --vs-export-a: #14844e;                         /* Studio Export fill, 135deg */
  --vs-export-b: #117042;
  --vs-on-export: #fff;
  --vs-chrome: rgb(255 255 255 / .90);            /* Studio chrome card */
  --vs-chrome-solid: #f7f5fb;
  --vs-trough: rgb(16 23 19 / .055);              /* segmented trough */
  --vs-prism: inset 0 1px 0 rgb(255 255 255 / .9), inset 1px 0 0 rgb(74 126 224 / .11), inset -1px -1px 0 rgb(206 116 56 / .10);

  /* ---------- type families ---------- */
  --f-display: var(--display, "Jost", "Futura", system-ui, sans-serif);
  --f-ui: var(--sans, "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif);
  --f-mono: var(--mono, "Plex Mono", ui-monospace, Menlo, monospace);

  /* ---------- type scale (desktop 1440 values; phone overrides below) ----------
     Floor: 14px for anything a person reads (captions, chips, readouts). 11-13px is retired.
     Display ceiling 80px (5rem), tracking floor -0.04em. */
  --t-display: clamp(44px, 5.4vw, 80px);          /* one per section, the claim */
  --t-headline: clamp(34px, 3.6vw, 56px);         /* section h2 */
  --t-title: clamp(22px, 1.9vw, 28px);            /* panel / card titles, Jost 500 */
  --t-lead: clamp(18px, 1.3vw, 20px);             /* the paragraph under a headline */
  --t-body: 17px;
  --t-ui: 15px;                                   /* buttons, tabs, tile labels, nav */
  --t-caption: 14px;                              /* captions, chips, hints */
  --t-readout: 14px;                              /* Plex Mono numerals: "120 mm" */
  --lh-display: .98;  --lh-headline: 1.02;  --lh-title: 1.15;  --lh-body: 1.5;  --lh-ui: 1.25;  --lh-caption: 1.4;
  --tr-display: -.035em; --tr-headline: -.03em; --tr-title: -.02em; --tr-body: -.011em; --tr-ui: -.005em; --tr-caption: 0;
  --w-display: 400; --w-headline: 400; --w-title: 500; --w-body: 400; --w-ui: 600; --w-strong: 650; --w-export: 700;
  --measure: 34rem;                               /* body copy max width, ~62ch at 17px */
  --measure-head: 12em;                           /* headline max width */

  /* ---------- spacing: 4/8 rhythm ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 56px);
  --sec-y: clamp(64px, 9vw, 128px);               /* vertical padding of a section that scrolls */
  --wrap: 1280px;

  /* ---------- radii (Studio) ---------- */
  --r-chip: 999px;      /* measurement pill, chip */
  --r-tab: 10px;        /* selected tab inside a trough */
  --r-tile: 12px;       /* tool tile, size cell, answer card */
  --r-trough: 13px;     /* segmented trough */
  --r-pill: 14px;       /* Export / primary button */
  --r-card: 18px;       /* side panel, chrome card */
  --r-well: 36px;       /* tactile well */

  /* ---------- elevation (Studio e1..e5) ---------- */
  --e-1: 0 2px 8px rgb(38 28 78 / .08);
  --e-2: 0 5px 18px rgb(38 28 78 / .10);
  --e-3: 0 9px 26px rgb(38 28 78 / .12);
  --e-4: 0 18px 48px rgb(38 28 78 / .14);         /* chrome card on the room */
  --e-5: 0 30px 80px rgb(38 28 78 / .18);

  /* ---------- motion ---------- */
  --d-fast: 140ms; --d-med: 260ms; --d-slow: 520ms;
  --ease-out: var(--ease, cubic-bezier(.16, 1, .3, 1));

  /* ---------- control sizes ---------- */
  --hit: 44px;          /* minimum target (the Studio tab is 44, the pill 46) */
  --pill-h: 46px;
}
@media (max-width: 760px) {
  :root {
    --t-display: clamp(40px, 11.4vw, 48px);
    --t-headline: clamp(32px, 8.6vw, 38px);
    --t-title: 22px;
    --t-lead: 17px;
    --t-body: 16px;
    --t-ui: 15px;
    --measure: 100%;
    --sec-y: 56px;
  }
}

/* ---------- browser surfaces (craft floor): page-wide once linked ---------- */
:root { accent-color: var(--vs-green); caret-color: var(--vs-green-ink); }
::selection { background: rgb(31 191 114 / .30); color: var(--vs-ink); }
:focus-visible { outline: 3px solid var(--vs-green-ink); outline-offset: 3px; box-shadow: 0 0 0 6px rgb(255 255 255 / .9); }
.vs-dark :focus-visible { outline-color: #6fe09d; box-shadow: 0 0 0 6px rgb(0 0 0 / .5); }
html { scrollbar-width: thin; scrollbar-color: rgb(16 23 19 / .28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(16 23 19 / .24); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(13 122 74 / .55); background-clip: content-box; }
a:not([class]) { text-underline-offset: .18em; text-decoration-thickness: 1px; }
input, textarea, select { caret-color: var(--vs-green-ink); }
input[type="range"], progress { accent-color: var(--vs-green); }

/* ---------- type classes ---------- */
.vs-display, .vs-headline, .vs-title { font-family: var(--f-display); color: var(--vs-ink); margin: 0; text-wrap: balance; font-optical-sizing: auto; }
.vs-display  { font-size: var(--t-display);  font-weight: var(--w-display);  line-height: var(--lh-display);  letter-spacing: var(--tr-display);  max-width: var(--measure-head); }
.vs-headline { font-size: var(--t-headline); font-weight: var(--w-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-headline); max-width: var(--measure-head); }
.vs-title    { font-size: var(--t-title);    font-weight: var(--w-title);    line-height: var(--lh-title);    letter-spacing: var(--tr-title); }
.vs-lead, .vs-body { font-family: var(--f-ui); color: var(--vs-ink-2); margin: 0; max-width: var(--measure); text-wrap: pretty; }
.vs-lead { font-size: var(--t-lead); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
.vs-body { font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); font-weight: var(--w-body); }
.vs-ui   { font: var(--w-ui) var(--t-ui)/var(--lh-ui) var(--f-ui); letter-spacing: var(--tr-ui); }
.vs-caption { font: 450 var(--t-caption)/var(--lh-caption) var(--f-ui); letter-spacing: var(--tr-caption); color: var(--vs-muted); margin: 0; text-wrap: pretty; max-width: 40ch; }
.vs-eyebrow { font: var(--w-ui) var(--t-caption)/1.2 var(--f-ui); letter-spacing: .02em; color: var(--vs-green-ink); margin: 0 0 var(--s-3); }
.vs-readout { font: 500 var(--t-readout)/1.2 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--vs-ink-2); }
.vs-num { font-variant-numeric: tabular-nums; }
.vs-strong { font-weight: var(--w-strong); color: var(--vs-ink); }
.vs-dark .vs-display, .vs-dark .vs-headline, .vs-dark .vs-title, .vs-dark .vs-strong { color: #fff; }
.vs-dark .vs-lead, .vs-dark .vs-body { color: rgb(255 255 255 / .84); }
.vs-dark .vs-caption { color: rgb(255 255 255 / .72); }
.vs-dark .vs-eyebrow { color: #6fe09d; }

/* ---------- layout: the section scaffold ---------- */
.vs-sec { padding: var(--sec-y) var(--gutter); background: var(--white, #fff); }
.vs-sec--alt { background: var(--vs-alt); }
.vs-wrap { max-width: var(--wrap); margin-inline: auto; }
.vs-copy { display: grid; gap: var(--s-4); align-content: start; max-width: var(--measure); }
.vs-copy > .vs-headline { margin-bottom: var(--s-1); }
.vs-copy > .vs-btn, .vs-copy > .vs-seg, .vs-copy > .vs-chip { justify-self: start; }
.vs-stack-3 > * + * { margin-top: var(--s-3); }
.vs-stack-5 > * + * { margin-top: var(--s-5); }
.vs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
@media (max-width: 860px) { .vs-split { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- buttons: the Studio Export pill is THE primary ---------- */
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--pill-h); padding: 0 22px; border: 0; border-radius: var(--r-pill);
  font: var(--w-export) var(--t-ui)/1 var(--f-ui); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--vs-on-export); background: linear-gradient(135deg, var(--vs-export-a), var(--vs-export-b));
  box-shadow: var(--vs-prism), 0 0 0 1px rgb(31 191 114 / .22), 0 6px 18px rgb(17 112 66 / .26);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-med) var(--ease-out), filter var(--d-fast); }
.vs-btn:hover { filter: brightness(1.07); box-shadow: var(--vs-prism), 0 0 0 1px rgb(31 191 114 / .3), 0 10px 26px rgb(17 112 66 / .32); }
.vs-btn:active { transform: translateY(1px) scale(.985); }
.vs-btn[disabled], .vs-btn[aria-disabled="true"] { filter: grayscale(.6) opacity(.55); cursor: not-allowed; box-shadow: none; }
.vs-btn--quiet { color: var(--vs-ink); background: var(--vs-chrome); box-shadow: var(--vs-prism), 0 0 0 1px var(--vs-line-2), var(--e-1); font-weight: var(--w-strong); }
.vs-btn--quiet:hover { filter: none; background: #fff; box-shadow: var(--vs-prism), 0 0 0 1px rgb(31 191 114 / .5), var(--e-2); }
.vs-btn--sm { min-height: var(--hit); padding: 0 16px; border-radius: var(--r-tile); }

/* ---------- segmented control (Studio tabs trough) ---------- */
.vs-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-trough); background: var(--vs-trough); box-shadow: inset 0 0 0 1px var(--vs-line); }
.vs-seg > button, .vs-seg > a { appearance: none; border: 0; background: transparent; min-height: var(--hit); padding: 0 16px; border-radius: var(--r-tab); cursor: pointer;
  font: var(--w-ui) var(--t-ui)/1 var(--f-ui); letter-spacing: .005em; color: var(--vs-ink-2); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-med) var(--ease-out), color var(--d-fast), box-shadow var(--d-med) var(--ease-out); }
.vs-seg > :hover { color: var(--vs-ink); background: rgb(255 255 255 / .55); }
.vs-seg > [aria-pressed="true"], .vs-seg > [aria-selected="true"], .vs-seg > .is-on { background: #fff; color: var(--vs-ink); font-weight: var(--w-strong); box-shadow: var(--e-1), 0 0 0 1px var(--vs-line); }

/* ---------- caption chip (measurement pill) and Studio chip ---------- */
.vs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 30px; border-radius: var(--r-chip); background: var(--vs-chrome); box-shadow: var(--vs-prism), 0 0 0 1px var(--vs-line); color: var(--vs-ink);
  font: var(--w-ui) var(--t-caption)/1.1 var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.vs-chip--mono { font-family: var(--f-mono); font-weight: 500; }
.vs-chip--accent { color: #0e4329; background: rgb(31 191 114 / .12); box-shadow: 0 0 0 1px rgb(31 191 114 / .30); }
.vs-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--vs-green); box-shadow: 0 0 0 2px #fff; flex: none; }

/* ---------- surfaces ---------- */
.vs-panel { background: var(--vs-chrome); border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--vs-prism), var(--e-4), 0 0 0 1px var(--vs-line);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.vs-tile { background: var(--vs-chrome-solid); border-radius: var(--r-tile); padding: var(--s-3) var(--s-4); box-shadow: 0 0 0 1px var(--vs-line); font: var(--w-ui) var(--t-ui)/1.25 var(--f-ui); }
.vs-tile[aria-selected="true"], .vs-tile.is-on { background: #ecf1ee; box-shadow: 0 0 0 1.5px rgb(14 67 41 / .42); }
.vs-rule { height: 1px; border: 0; background: var(--vs-line); margin: var(--s-5) 0; }

/* ---------- the pinned-section caption (replaces ad hoc 11-13px floating labels) ---------- */
.vs-cap-float { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--s-5); max-width: min(32rem, calc(100% - 32px)); text-align: center;
  padding: 8px 14px; border-radius: var(--r-chip); background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: 0 0 0 1px var(--vs-line), var(--e-1); font: 500 var(--t-caption)/1.35 var(--f-ui); color: var(--vs-ink); }

@media (prefers-reduced-motion: reduce) { .vs-btn, .vs-seg > *, .vs-btn:active { transition: none; transform: none; } }
@media (forced-colors: active) { .vs-btn, .vs-seg > [aria-pressed="true"] { forced-color-adjust: auto; border: 1px solid ButtonText; } }