:root {
  --color-bg:            #FAFAFA;
  --color-surface:       #FFFFFF;
  --color-text-primary:  #1C1C1C;
  --color-text-muted:    #A6A4A4;
  --color-accent:        #40E40E;
  --color-border:        #A6A4A4;
  --color-grid-dot:      #D9D9D9;
  --color-grid-opacity:  0.40;

  --font-family:          'Inter', sans-serif;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.125rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --nav-height:     65px;
  --nav-pad-x:      48px;
  --nav-gap:        20px;
  --nav-icon-size:  42px;
  --max-width:      1200px;
  --section-pad-x:  43px;
  --section-pad-y:  var(--space-16);

  --badge-radius: 99px;
  --badge-px:     12px;
  --badge-py:     5px;
  --badge-gap:    12px;
  --card-radius:  12px;

  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --transition:  0.2s ease;

  /* Inverted / dark bands (work, contact) */
  --section-dark-bg:           #121212;
  --section-dark-text:         #F5F5F5;
  --section-dark-text-muted:   #A3A3A3;
  --section-dark-border:       rgba(245, 245, 245, 0.18);
  --section-dark-surface:      #1E1E1E;
  --section-dark-grid-line:    rgba(255, 255, 255, 0.07);
  --section-dark-shadow-card:  0 1px 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
}