:root {
  --color-white:        #FFFFFF;
  --color-slate-light:  #F8FAFC;
  --color-charcoal:     #111111;
  --color-blue:         #1E88E5;
  --color-red:          #E53935;
  --color-yellow:       #FDD835;

  --color-text:         #111111;
  --color-text-body:    #475569;
  --color-text-muted:   #94A3B8;
  --color-text-inverse: #FFFFFF;

  --color-bg-page:      #FFFFFF;
  --color-bg-alt:       #F8FAFC;
  --color-bg-dark:      #111111;
  --color-bg-card:      #FFFFFF;
  --color-bg-pill:      #F1F5F9;

  --color-border:       #E2E8F0;
  --color-border-focus: #1E88E5;
  --color-border-error: #E53935;

  --border-accent-blue: 4px solid #1E88E5;
  --border-accent-red:  4px solid #E53935;
  --border-accent-dark: 4px solid #111111;

  --quad-line-gradient: linear-gradient(
    to right,
    #E53935 0% 25%,
    #FDD835 25% 50%,
    #1E88E5 50% 75%,
    #111111 75% 100%
  );

  --font-primary: 'Inter', 'Helvetica Neue', 'Arial', system-ui, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;
  --weight-extrabold:800;

  --text-xs:   0.6875rem;
  --text-sm:   0.875rem;
  --text-base: 0.9375rem;
  --text-lg:   1rem;
  --text-xl:   1.125rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;
  --tracking-meta:   0.08em;

  --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-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius:         0px;
  --max-width:      1200px;
  --content-width:  720px;
  --section-py:     var(--space-20);
  --section-px:     var(--space-6);

  --shadow-card:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(30,136,229,0.14);

  --transition: 200ms ease;

  --input-height:  44px;
  --button-height: 44px;
}

/*
 * Dark mode is NOT auto-applied from system preference.
 * This landing page always renders in the brand's light palette.
 * Dark mode only activates when data-theme="dark" is explicitly set.
 */
:root[data-theme="dark"] {
  --color-bg-page:   #0F1117;
  --color-bg-alt:    #1A1D27;
  --color-bg-card:   #1A1D27;
  --color-bg-pill:   #232636;
  --color-border:    #2E3250;
  --color-text:      #F0F2FA;
  --color-text-body: #9AA0BF;
  --color-text-muted:#5A6180;
}