/* TruScan 2.0 design tokens ("Calm Precision"). Values are copied from
   docs/design/truscan-2.0/screens (Foundations, Components, Home, Home-Light).
   Dark is the default; [data-theme="light"] is the browser-local alternative.
   The second block maps the older variable names onto these tokens, so pages that are
   not rebuilt yet already use the 2.0 palette and type. */

@font-face {
  font-family: "Instrument Sans";
  src: url(/assets/fonts/instrument-sans-var.woff2?v=aa72922aaf) format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(/assets/fonts/geist-mono-var.woff2?v=afaacc4c5f) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --page: #0A0C0D;
  --panel: #101416;
  --raised: #151A1C;
  --surface-2: #171C1E;
  --surface-3: #1B2124;
  --inset: #0D1112;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.12);
  --text: #F2F5F4;
  --text-2: #AEB9B5;
  --text-3: #9AA6A2;
  --muted: #8A9692;
  --text-soft: #D5DDDA;
  --field: #13181A;
  --accent: #A8F5D5;
  --accent-hover: #D6FBEA;
  --mint: #A8F5D5;
  --mint-ink: #07120E;
  --mint-soft: rgba(168,245,213,0.10);
  --mint-hover: #C4FAE4;
  --mint-ring: rgba(168,245,213,0.12);
  --amber: #FFC15A;
  --amber-soft: rgba(255,193,90,0.12);
  --rose: #FF8FA8;
  --rose-soft: rgba(255,107,139,0.12);
  --sky: #7CCBFF;
  --sky-soft: rgba(124,203,255,0.12);
  --unchecked: #AEB9B5;
  --unchecked-soft: rgba(255,255,255,0.06);
  --logo: #A8F5D5;
  --focus: #A8F5D5;

  --btn-2-bg: rgba(255,255,255,0.05);
  --btn-2-border: rgba(255,255,255,0.10);
  --btn-2-hover-bg: rgba(255,255,255,0.09);
  --btn-2-hover-border: rgba(255,255,255,0.20);
  --icon-btn-bg: rgba(255,255,255,0.04);
  --icon-btn-border: rgba(255,255,255,0.08);
  --icon-btn-color: #AEB9B5;
  --footer-icon-bg: rgba(255,255,255,0.04);

  --nav-bg: rgba(16,20,22,0.80);
  --nav-border: rgba(255,255,255,0.08);
  --nav-shadow: 0 14px 40px -20px rgba(0,0,0,0.8);
  --nav-text: #AEB9B5;
  --nav-hover: rgba(255,255,255,0.06);
  --nav-active: rgba(255,255,255,0.08);
  --count-bg: rgba(255,255,255,0.08);
  --menu-bg: #13181A;
  --menu-border: rgba(255,255,255,0.10);
  --menu-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
  --menu-item: #D5DDDA;
  --menu-hover: rgba(255,255,255,0.05);
  --menu-foot: rgba(255,255,255,0.03);
  --menu-icon-border: rgba(168,245,213,0.22);
  --bar-bg: rgba(13,17,18,0.92);
  --bar-border: rgba(255,255,255,0.08);
  --bar-shadow: 0 -18px 40px -24px rgba(0,0,0,0.9);
  --tab: #8A9692;
  --tab-active-bg: rgba(168,245,213,0.12);
  --sheet-bg: #0D1112;
  --sheet-line: rgba(255,255,255,0.08);
  --switch-bg: rgba(255,255,255,0.05);
  --switch-active: rgba(255,255,255,0.10);
  --switch-text: #9AA6A2;
  --sheet-close-bg: rgba(255,255,255,0.08);

  --r-pill: 999px;
  --container: 1200px;
  --gutter-2: 24px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #F5F7F6;
  --panel: #FFFFFF;
  --raised: #EEF2F0;
  --surface-2: #EEF2F0;
  --surface-3: #E6ECE9;
  --inset: #EEF2F0;
  --line: rgba(11,18,16,0.08);
  --line-strong: rgba(11,18,16,0.12);
  --text: #0B1210;
  --text-2: #46524D;
  --text-3: #46524D;
  --muted: #5E6A65;
  --text-soft: #0B1210;
  --field: #FFFFFF;
  --accent: #0B7A52;
  --accent-hover: #075C3D;
  --mint: #A8F5D5;
  --mint-ink: #07120E;
  --mint-soft: rgba(11,122,82,0.10);
  --mint-hover: #C4FAE4;
  --mint-ring: rgba(11,122,82,0.10);
  --amber: #8A5300;
  --amber-soft: #FFF1D6;
  --rose: #B4233F;
  --rose-soft: #FFE3E9;
  --sky: #1D5A85;
  --sky-soft: #E3F1FB;
  --unchecked: #46524D;
  --unchecked-soft: rgba(11,18,16,0.06);
  --logo: #0B7A52;
  --focus: #0B7A52;

  --btn-2-bg: rgba(11,18,16,0.03);
  --btn-2-border: rgba(11,18,16,0.10);
  --btn-2-hover-bg: rgba(11,18,16,0.06);
  --btn-2-hover-border: rgba(11,18,16,0.20);
  --icon-btn-bg: rgba(11,18,16,0.03);
  --icon-btn-border: rgba(11,18,16,0.10);
  --icon-btn-color: #46524D;
  --footer-icon-bg: #FFFFFF;

  --nav-bg: rgba(255,255,255,0.85);
  --nav-border: rgba(11,18,16,0.08);
  --nav-shadow: 0 1px 2px rgba(11,18,16,0.04), 0 14px 40px -24px rgba(11,18,16,0.22);
  --nav-text: #46524D;
  --nav-hover: rgba(11,18,16,0.05);
  --nav-active: rgba(11,18,16,0.06);
  --count-bg: rgba(11,18,16,0.06);
  --menu-bg: #FFFFFF;
  --menu-border: rgba(11,18,16,0.10);
  --menu-shadow: 0 1px 2px rgba(11,18,16,0.04), 0 30px 80px -30px rgba(11,18,16,0.25);
  --menu-item: #0B1210;
  --menu-hover: rgba(11,18,16,0.05);
  --menu-foot: rgba(11,18,16,0.03);
  --menu-icon-border: rgba(11,122,82,0.25);
  --bar-bg: rgba(255,255,255,0.92);
  --bar-border: rgba(11,18,16,0.08);
  --bar-shadow: 0 -18px 40px -24px rgba(11,18,16,0.22);
  --tab: #5E6A65;
  --tab-active-bg: rgba(11,122,82,0.10);
  --sheet-bg: #F5F7F6;
  --sheet-line: rgba(11,18,16,0.08);
  --switch-bg: rgba(11,18,16,0.05);
  --switch-active: #FFFFFF;
  --switch-text: #5E6A65;
  --sheet-close-bg: rgba(11,18,16,0.06);
}

/* Older variable names, mapped onto the 2.0 tokens until each page is rebuilt. */
:root, :root[data-theme="light"] {
  --night: var(--page);
  --deck: var(--panel);
  --deck-hi: var(--raised);
  --well: var(--inset);
  --wire: var(--line-strong);
  --wire-soft: var(--line);
  --paper: var(--text);
  --mist: var(--text-2);
  --haze: var(--text-3);
  --ash: var(--muted);
  --uv: var(--accent);
  --uv-text: var(--accent);
  --glow: var(--accent);
  --signal: var(--rose);
  --signal-text: var(--rose);
  --ice: var(--sky);
  --action-bg: var(--mint);
  --action-ink: var(--mint-ink);
  --accent-soft: var(--mint-soft);
  --display: var(--font-sans);
  --body: var(--font-sans);
  --mono: var(--font-mono);
}

html { background: var(--page); }
:root body {
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:root :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* 2.0 views: browser-default line height and plain links, as in the screens. */
.ts2 { line-height: normal; }
/* Views converted straight from the screens use the browser's default box sizing, like the screens. */
:where(.ts2-cb) *, :where(.ts2-cb) *::before, :where(.ts2-cb) *::after { box-sizing: content-box; }
:where(.ts2-cb) :where(button, select) { box-sizing: border-box; }
:where(.ts2, .ts-header, .ts-footer) :where(a) { color: var(--accent); }
:where(.ts2, .ts-header, .ts-footer) :where(a:hover) { color: var(--accent-hover); }
::selection { color: var(--mint-ink); background: var(--mint); }

/* Shared motion (Home, TruScan Bot and the other 2.0 screens). One moving thing per section. */
@keyframes ts-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@keyframes ts-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ts-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ts-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ts-beam { 0% { transform: translateY(-120px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(420px); opacity: 0; } }
@keyframes ts-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ts-drift { 0%, 100% { transform: translate3d(0,0,0) scale(1.02); } 50% { transform: translate3d(-18px,-10px,0) scale(1.05); } }
@keyframes ts-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
:where(.ts-float) { animation: ts-float 7s ease-in-out infinite; }
:where(.ts-spin) { animation: ts-spin 60s linear infinite; }
:where(.ts-spin-rev) { animation: ts-spin 90s linear infinite reverse; }
:where(.ts-pulse) { animation: ts-pulse 2.6s ease-in-out infinite; }
:where(.ts-rise) { animation: ts-rise .8s cubic-bezier(.2,.7,.2,1) both; }
:where(.ts-marquee) { animation: ts-marquee 48s linear infinite; }
:where(.ts-beam) { animation: ts-beam 4.8s cubic-bezier(.45,0,.55,1) infinite; }
:where(.ts-blink) { animation: ts-blink 1.6s ease-in-out infinite; }
:where(.ts-drift) { animation: ts-drift 18s ease-in-out infinite; }
:where(.ts-travel) { animation: ts-travel 5.5s cubic-bezier(.45,0,.55,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}