:root{
  /* Brand palette (dark theme) */
  --color-primary:#2c3f93;            /* primary Scientific blue */
  --color-accent-purple:#6a0dad;       /* secondary accent */
  --color-accent-turquoise:#00bcd4;    /* interactive accent */
  --color-bg:#0d0d0d;                  /* near-black */
  --color-bg-2:#121212;
  --color-text:#ffffff;
  --color-text-2:#e0e0e0;
  --color-border:#1f1f1f;

  /* Typography */
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --fs-xxl: clamp(28px, 4vw, 40px);
  --fs-xl: 28px;
  --fs-lg: 22px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --lh-tight: 1.1;
  --lh: 1.5;

  /* Logo height (controls clear-space too) */
  --logo-h: 36px;

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-8:40px; --s-10:56px; --s-12:72px;

  /* Elevation & focus */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 24px rgba(0,0,0,.5);
  --focus:0 0 0 3px var(--color-accent-turquoise);
}

/* Responsive container widths */
@media (max-width:640px){ :root{ --container: 92vw; } }
@media (min-width:641px) and (max-width:1024px){ :root{ --container: 88vw; } }
@media (min-width:1025px){ :root{ --container: 1120px; } }