/* ==========================================================================
   TECHSPEAK — DESIGN TOKENS v2
   White base. Navy text. Blue accents. Clean and light.
   ========================================================================== */

:root {

  /* Page base */
  --color-bg:             #FFFFFF;
  --color-bg-soft:        #F8FAFC;
  --color-bg-muted:       #F1F5F9;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F8FAFC;

  /* Borders */
  --color-border:         #E2E8F0;
  --color-border-dark:    #CBD5E1;

  /* Navy — header, footer, text headings only */
  --color-navy:           #0A1628;
  --color-navy-mid:       #0F1F3D;
  --color-navy-light:     #1E3A5F;
  --color-navy-border:    #2A4A70;
  --color-navy-muted:     #94A3B8;
  --color-navy-subtle:    #4B8BDB;

  /* Primary text */
  --color-text:           #0F172A;
  --color-text-muted:     #475569;
  --color-text-subtle:    #94A3B8;
  --color-text-white:     #FFFFFF;

  /* Blue — CTAs, links, highlights */
  --color-blue:           #2563EB;
  --color-blue-hover:     #1D4ED8;
  --color-blue-light:     #EFF6FF;
  --color-blue-mid:       #DBEAFE;
  --color-blue-muted:     #93C5FD;
  --color-blue-dark:      #1E40AF;

  /* Green — metrics, results, success */
  --color-green:          #10B981;
  --color-green-light:    #ECFDF5;
  --color-green-dark:     #065F46;

  /* Amber — pain points, problems section */
  --color-amber:          #F59E0B;
  --color-amber-light:    #FFFBEB;
  --color-amber-mid:      #FEF3C7;
  --color-amber-dark:     #92400E;
  --color-amber-darker:   #78350F;
  --color-amber-border:   #FCD34D;

  /* Red — before states */
  --color-red:            #EF4444;
  --color-red-light:      #FEF2F2;

  /* Typography */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Inter Mono', 'Fira Code', monospace;

  --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.25rem;
  --text-5xl:     3rem;
  --text-6xl:     3.75rem;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* Spacing */
  --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;

  --section-py:     6rem;
  --section-py-md:  4rem;
  --section-py-sm:  3rem;

  /* Layout */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 760px;
  --container-px:     1.5rem;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.10);
  --shadow-blue: 0 4px 20px rgba(37,99,235,0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}

@media (max-width: 768px) {
  :root {
    --section-py:   var(--section-py-sm);
    --container-px: 1rem;
    --text-5xl:     2.5rem;
    --text-4xl:     2rem;
    --text-3xl:     1.5rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --section-py:   var(--section-py-md);
    --container-px: 1.25rem;
  }
}