/*
 * TrueSens design tokens
 * Concept: a metrology lab. Pale anodized aluminium plates, graphite ink, crisp hairline
 * engraving, one tape-yellow measuring blade and one red index line for the measured value.
 *
 * The desktop app is light-only. Website pages opt into a dark theme by putting
 * data-site on <html>; dark values follow prefers-color-scheme or data-theme="dark".
 */
:root {
  /* ---------- Surfaces: anodized aluminium (cool grey, blue-biased) ---------- */
  --bg:          #E8ECF1;   /* window ground */
  --bg-deep:     #DCE2E9;   /* nav rail, sunken bands */
  --plate:       #F4F6F9;   /* raised instrument plate */
  --plate-hi:    #FCFDFE;   /* top highlight of a plate, hover fill */
  --well:        #EBEEF2;   /* engraved input well */
  --glass:       rgba(214, 228, 246, 0.22); /* acrylic cursor window */
  --line:        rgba(20, 28, 40, 0.13);    /* hairline engraving */
  --line-strong: rgba(20, 28, 40, 0.24);
  --bevel-hi:    rgba(255, 255, 255, 0.92);
  --bevel-lo:    rgba(20, 28, 40, 0.07);

  /* ---------- Ink: graphite ---------- */
  --ink:   #141A22;  /* primary text, graduations */
  --ink-2: #3B4450;  /* secondary text */
  --ink-3: #66717F;  /* engraved labels */
  --ink-4: #949DA9;  /* hints, disabled */
  --ink-inverse: #F4F6F9;

  /* ---------- Signature: tape blade (blade + one primary CTA only) ---------- */
  --tape:      #F5C20B;
  --tape-hi:   #FFDA4D;
  --tape-lo:   #DCA800;
  --tape-edge: #9C7400;
  --tape-ink:  #121314;

  /* ---------- Signature: red index (measured value only) ---------- */
  --index:      #E0241A;
  --index-soft: rgba(224, 36, 26, 0.12);

  /* ---------- Semantic status (separate from the signature colors) ---------- */
  --ok:       #1F7547;  --ok-bg:   #DCEEE3;
  --warn:     #9C5406;  --warn-bg: #F5E5D0;
  --err:      #B3261E;  --err-bg:  #F6DEDB;
  --info:     #2D5A86;  --info-bg: #DDE7F2;

  /* ---------- Windows chrome ---------- */
  --caption-hover: rgba(20, 28, 40, 0.07);
  --caption-close: #C42B1C;   /* Windows 11 close button hover */
  --focus-outer:   #141A22;
  --focus-inner:   #FFFFFF;

  /* ---------- Type ---------- */
  --font-display: "SF Pro Display", "SF Pro", sans-serif;
  --font-text:    "SF Pro Text", "SF Pro", sans-serif;
  --font-mono:    "SF Mono", ui-monospace, monospace;

  --t-readout:  128px;  /* hero numeral, weight 250 */
  --t-display:  56px;   /* result numeral, weight 500 */
  --t-number:   30px;   /* input numerals */
  --t-title:    22px;   /* screen titles */
  --t-heading:  15px;   /* plate headings */
  --t-body:     13.5px;
  --t-small:    12px;
  --t-label:    10.5px; /* engraved uppercase labels, tracking .11em */
  --t-mono:     12.5px;
  --t-mono-s:   11px;

  /* ---------- Spacing (4 px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---------- Radii: machined, never pillowy ---------- */
  --r-0: 2px;   /* ticks, tags */
  --r-1: 4px;   /* inputs, buttons, chips */
  --r-2: 6px;   /* plates */
  --r-pill: 999px; /* status chips only */

  /* ---------- Elevation ---------- */
  --shadow-plate: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo),
                  0 1px 2px rgba(20, 28, 40, 0.06), 0 8px 20px -14px rgba(20, 28, 40, 0.28);
  --shadow-well:  inset 0 1px 2px rgba(20, 28, 40, 0.10), inset 0 0 0 1px var(--line);
  --shadow-key:   inset 0 1px 0 var(--bevel-hi), 0 1px 0 rgba(20, 28, 40, 0.10), 0 0 0 1px var(--line-strong);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-slide: cubic-bezier(0.65, 0, 0.35, 1);  /* blade travel */
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 420ms;

  color-scheme: light;
}

/* ---------- Website dark theme: dark anodized graphite. The blade stays yellow (it is a physical object). ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-site]:not([data-theme="light"]) {
    --bg: #11151A; --bg-deep: #0C0F13; --plate: #191E25; --plate-hi: #212731; --well: #0F1318;
    --glass: rgba(170, 200, 240, 0.10);
    --line: rgba(214, 226, 242, 0.11); --line-strong: rgba(214, 226, 242, 0.20);
    --bevel-hi: rgba(255, 255, 255, 0.06); --bevel-lo: rgba(0, 0, 0, 0.35);
    --ink: #E8EDF3; --ink-2: #B9C2CD; --ink-3: #8C97A5; --ink-4: #646F7D; --ink-inverse: #11151A;
    --index: #FF4A3D; --index-soft: rgba(255, 74, 61, 0.16);
    --ok: #5BC48E; --ok-bg: #16301F; --warn: #E3A35A; --warn-bg: #33240F;
    --err: #FF8A80; --err-bg: #3A1714; --info: #8DB7E6; --info-bg: #142538;
    --caption-hover: rgba(255, 255, 255, 0.08);
    --focus-outer: #E8EDF3; --focus-inner: #11151A;
    --shadow-plate: inset 0 1px 0 var(--bevel-hi), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
    --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line);
    --shadow-key: inset 0 1px 0 var(--bevel-hi), 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line-strong);
    color-scheme: dark;
  }
}
:root[data-site][data-theme="dark"] {
  --bg: #11151A; --bg-deep: #0C0F13; --plate: #191E25; --plate-hi: #212731; --well: #0F1318;
  --glass: rgba(170, 200, 240, 0.10);
  --line: rgba(214, 226, 242, 0.11); --line-strong: rgba(214, 226, 242, 0.20);
  --bevel-hi: rgba(255, 255, 255, 0.06); --bevel-lo: rgba(0, 0, 0, 0.35);
  --ink: #E8EDF3; --ink-2: #B9C2CD; --ink-3: #8C97A5; --ink-4: #646F7D; --ink-inverse: #11151A;
  --index: #FF4A3D; --index-soft: rgba(255, 74, 61, 0.16);
  --ok: #5BC48E; --ok-bg: #16301F; --warn: #E3A35A; --warn-bg: #33240F;
  --err: #FF8A80; --err-bg: #3A1714; --info: #8DB7E6; --info-bg: #142538;
  --caption-hover: rgba(255, 255, 255, 0.08);
  --focus-outer: #E8EDF3; --focus-inner: #11151A;
  --shadow-plate: inset 0 1px 0 var(--bevel-hi), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
  --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line);
  --shadow-key: inset 0 1px 0 var(--bevel-hi), 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line-strong);
  color-scheme: dark;
}

.cv { object-fit: cover; }