/* ─── Single source of truth for all design variables ─── */
/* Change any value here → it changes everywhere on the site */

:root {
  /* ─── Colours ─── */
  --color-bg:            #0D1117;
  --color-bg-alt:        #161B22;
  --color-surface:       #21262D;
  --color-border:        #30363D;
  --color-text:          #E6EDF3;
  --color-text-muted:    #A0ADB8;
  --color-accent:        #00E676;
  --color-accent-hover:  #69F0AE;
  --color-accent-subtle: rgba(0, 230, 118, 0.1);
  --color-accent-glow:   rgba(0, 230, 118, 0.2);
  --color-error:         #F85149;

  /* ─── Typography ─── */
  --font-sans:   'Satoshi', system-ui, sans-serif;
  --font-serif:  'Instrument Serif', Georgia, serif;
  --font-mono:   'JetBrains Mono', monospace;

  /* ─── Font Sizes ─── */
  --text-xs:     0.875rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.75rem;
  --text-4xl:    2.5rem;
  --text-hero:   clamp(2.5rem, 6vw, 5rem);

  /* ─── Spacing ─── */
  --space-section:        5rem;
  --space-section-mobile: 3rem;
  --container-max:        1280px;
  --container-padding:    1.5rem;

  /* ─── Border Radius ─── */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ─── Shadows ─── */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 0 20px var(--color-accent-glow);
  --shadow-glow:       0 0 30px var(--color-accent-glow);
}