/* Fermi · design foundation
   Brand: Fermi. Logos, Inter, Material Symbols Rounded, Fermi motion rules.
   Goal: clean, scannable, simple to navigate. White surfaces, hairline
   borders, generous air, light mode only.
   Primary action colour: Fermi field blue. Near-black is secondary only. */

:root {
  /* ---- type: one family, hierarchy by size + weight + colour ---- */
  --family-ui: 'Inter', system-ui, sans-serif;

  /* ---- neutrals (RGB triplets so alpha can ride on any token) ---- */
  --bg-primary: 255 255 255;
  --bg-secondary: 250 250 250;
  --bg-tertiary: 245 245 245;

  --border-primary: 230 230 230;   /* hairlines everywhere */
  --border-secondary: 204 204 204;
  --divider: 240 240 240;

  --content-primary: 20 20 20;
  --content-secondary: 82 82 82;
  --content-tertiary: 100 100 100;
  --content-muted: 148 148 148;
  --content-inverse: 255 255 255;

  --danger-bg: 253 231 226;
  --danger-content: 184 21 20;

  /* ---- action roles ---- */
  --action-primary: 14 126 199;        /* field blue, THE one primary per screen */
  --action-primary-hover: 10 95 151;
  --action-secondary: 20 20 20;        /* near-black, demoted to secondary emphasis */
  --action-secondary-hover: 61 61 61;

  /* ---- Fermi field blue family ---- */
  --field: 14 126 199;             /* #0E7EC7 */
  --field-deep: 10 95 151;         /* #0A5F97 */
  --field-soft: rgba(14, 126, 199, 0.07);

  /* pastel tile grounds for feature cards */
  --tile-blue: 234 243 250;
  --tile-green: 237 246 229;
  --tile-orange: 253 240 229;
  --tile-pink: 252 235 240;

  /* ---- radius language ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- elevation (nearly flat; borders carry structure) ---- */
  --sh-card: 0 1px 2px rgba(20, 20, 20, 0.04);
  --sh-float: 0 8px 24px rgba(20, 20, 20, 0.08), 0 2px 6px rgba(20, 20, 20, 0.05);

  /* ---- motion (Fermi: transform/opacity only, reduced-motion respected) ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* base */
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: var(--family-ui);
  font-size: 15px;
  line-height: 1.5;
  color: rgb(var(--content-primary));
  background: rgb(var(--bg-primary));
}

/* display voice: neatness comes from restrained weight, tight leading
   and negative tracking, not from size */
.t-display { font-size: 38px; line-height: 1.15; font-weight: 550; letter-spacing: -0.025em; }
.t-hero    { font-size: 28px; line-height: 1.2;  font-weight: 550; letter-spacing: -0.02em; }
.t-section { font-size: 21px; line-height: 1.25; font-weight: 550; letter-spacing: -0.015em; }
.t-card    { font-size: 16px; line-height: 1.3;  font-weight: 550; letter-spacing: -0.01em; }

/* UI voice */
.t-body   { font-size: 15px; color: rgb(var(--content-secondary)); }
.t-label  { font-size: 14px; font-weight: 500; }
.t-micro  { font-size: 12.5px; color: rgb(var(--content-muted)); }

/* focus ring, always */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--field));
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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