/* Warm brand: editorial, fintech, premium SaaS */
:root[data-theme="warm"] {
  --color-bg:           #3062bf;
  --color-button-bg:    #3062bf;
  --color-surface:      #f8f2eb;
  --color-surface-2:    #F2EDE6;
  --color-border:       #E8DDD2;
  --color-border-strong:#C8B8A8;
  --color-text:         #014b99;
  --color-text-2:       #09014e;
  --color-headlines:    #3062bf;
  --color-text-muted:   #4b4744;
  --color-brand:        #C4502A;
  --color-brand-subtle: #F5EAE4;
  --shadow-sm: 0 1px 3px rgba(100,60,30,0.08), 0 0 0 1px rgba(100,60,30,0.04);
  --shadow-md: 0 4px 16px rgba(100,60,30,0.10), 0 1px 4px rgba(100,60,30,0.06);
  --shadow-lg: 0 12px 40px rgba(100,60,30,0.12), 0 2px 8px rgba(100,60,30,0.06);
}

:root[data-theme="cool"] {
  --color-bg:           #1b4db0;
  --color-surface:      #F0F4F7;
  --color-surface-2:    #f2f3f5;
  --color-border:       #e3e7ed;
  --color-border-strong:#BCC6DA;
  --color-text:         #2d3440;
  --color-text-2:       #394157;
  --color-headlines:    #1b4db0;
  --color-text-muted:   #7e90a5;
  --color-brand:        #2563EB;
  --color-brand-subtle: #EEF3FF;
  --color-button-bg:    #1b4db0;
  --shadow-sm: 0 1px 3px rgba(30,50,100,0.08), 0 0 0 1px rgba(30,50,100,0.04);
  --shadow-md: 0 4px 16px rgba(30,50,100,0.10), 0 1px 4px rgba(30,50,100,0.06);
  --shadow-lg: 0 12px 40px rgba(30,50,100,0.12), 0 2px 8px rgba(30,50,100,0.06);
  --body-fonts: 'Courier New', Courier, monospace	;;

}
/* 8px grid system — the fix */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
}

:root {
  --base-font-size: 18px
}

:root {
  --text-base: 1rem;       /* 16px — body */
  --text-lg: 1.25rem;      /* 20px — small headings */
  --text-xl: 1.5rem;       /* 24px — h3 */
  --text-2xl: 2rem;        /* 32px — h2 */
  --text-4xl: 3rem;        /* 48px — h1 */
}