/* Look A (Clean Pro) design tokens: light values, bundled Inter, minimal base styles.
   tokens-dark.css adds the dark values; the website uses this file alone.
   Inter is bundled (fonts/ next to this file); nothing loads from a third-party server. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --ground: #FFFFFF;
  --surface: #F7F7F8;
  --ink: #0F172A;
  --muted: #475569;
  --border: #E2E8F0;
  --accent: #4F46E5;
  --accent-ink: #FFFFFF;
  --accent-pressed: #4338CA;
  --accent-tint: #EEF2FF;
  --success: #047857;
  --warning: #92400E;
  --warning-bg: #FFFBEB;
  --error: #B91C1C;
  --radius-card: 10px;
  --radius-btn: 8px;
  /* Shadows: a lifted control (main button, the selected segment), a resting
     card, the action bar's edge, and a popover. */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.12);
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-bar: 0 -8px 24px rgb(15 23 42 / 0.05);
  --shadow-pop: 0 2px 4px rgb(15 23 42 / 0.06), 0 18px 44px rgb(15 23 42 / 0.16);
  --font: 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font); background: var(--ground); color: var(--ink); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }