/* ============================================================================
 * THEME — design tokens. Edit this file to recolor / restyle the whole site.
 *
 *  Color palette:    backgrounds, cards, borders, text, teal accent
 *  Typography:       font stacks
 *  Geometry:         radii, max content width
 *  Shadows:          card resting + hover
 * ==========================================================================*/

:root {
  /* Backgrounds */
  --bg:            #0F172A;
  --bg-2:          #0B1222;

  /* Surfaces */
  --card:          #1E293B;
  --card-2:        #243044;

  /* Borders */
  --border:        #243044;
  --border-strong: #324158;

  /* Text */
  --text:          #E6EDF7;
  --text-dim:      #94A3B8;
  --text-mute:     #64748B;

  /* Accent (the teal) — change these three to recolor the whole site. */
  --teal:          #00B4A6;
  --teal-soft:     rgba(0, 180, 166, 0.12);
  --teal-line:     rgba(0, 180, 166, 0.35);
  --teal-glow:     0 0 0 3px rgba(0, 180, 166, 0.18);

  /* Geometry */
  --radius:        8px;
  --radius-lg:     14px;
  --max:           1180px;

  /* Shadows */
  --shadow:        0 1px 0 rgba(255,255,255,0.02) inset, 0 10px 30px -10px rgba(0,0,0,0.5);
  --shadow-hover:  0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -18px rgba(0,180,166,0.35), 0 10px 30px -10px rgba(0,0,0,0.6);

  /* Fonts (loaded in index.html — change there too if swapping families) */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}