/* Lenz — site baseline.
   The single source for the reset, the design tokens, and the browser-surface
   defaults every page shares. Load this first; page stylesheets layer on top.

   index.html  → site.css + a page-scoped <style>
   privacy.html, terms.html → site.css + legal.css */

/* ---- Reset ---------------------------------------------------------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Tokens --------------------------------------------------------- */

:root {
  /* Surfaces. The site reads light; --color-text doubles as the ink field
     the security section and the chart chrome are drawn on. */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Neutrals, light to dark. One shared lightness scale, so the same step of
     any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Accent. --color-accent is the brand red and belongs on marks, rules, and
     small fills. Text-bearing red fields and white-on-red buttons use
     --color-accent-deep: white on #ec3013 is 4.2:1 and fails AA at body
     sizes, #c9280f clears it at 5.5:1. --color-accent-700 is the readable
     red for links and labels on the light ground; --color-accent-400 is the
     tint that reads on the ink ground. */
  --color-accent: #ec3013;
  --color-accent-deep: #c9280f;
  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  /* Foreground on an accent field */
  --on-accent: #fff;
  --on-accent-soft: rgba(255, 255, 255, .92);

  /* Elevation — soft ink-tinted shadows on the light ground. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Type. One family, weights 400/500/600/700/800/900. */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;

  /* Loop length for the hero scan animation. */
  --loop: 6s;
}

/* ---- Base ----------------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scrollbar-color: var(--color-neutral-400) var(--color-bg);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2 { text-wrap: balance; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

img { display: block; max-width: 100%; }

/* Links are undecorated in chrome and underlined in running text — colour
   alone never carries a link. */
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
p a, li a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Browser surfaces ----------------------------------------------- */

::selection { background: var(--color-accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-600); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}