/* =====================================================================
   SEO Tribe — Design Tokens
   Navy + green palette (matches the brand logo).
   ===================================================================== */

:root {
  /* ---- Shared (palette-agnostic) ---- */
  --color-off-white: #FBFCFA;
  --color-sand:      #F7F1E8;
  --color-charcoal:  #202624;
  --color-ink-700:   #3A4341;
  --color-ink-500:   #5E6B68;
  --color-ink-300:   #97A09D;
  --color-border:    #E6E2D9;
  --color-border-strong: #D5CFC1;
  --color-white:     #FFFFFF;

  --color-success: #2BC78A;
  --color-warning: #F27B35;
  --color-danger:  #D14343;

  /* ---- Type ---- */
  --font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Spacing scale (8pt-ish) ---- */
  --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;
  --space-32: 8rem;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(20, 30, 40, 0.04), 0 1px 1px rgba(20, 30, 40, 0.03);
  --shadow-md:  0 4px 14px rgba(20, 30, 40, 0.06), 0 2px 4px rgba(20, 30, 40, 0.04);
  --shadow-lg:  0 18px 42px rgba(20, 30, 40, 0.12), 0 6px 12px rgba(20, 30, 40, 0.06);
  --shadow-cta: 0 10px 24px rgba(15, 42, 68, 0.18);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Transitions ---- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 320ms cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
   Brand palette — Navy + Green
   ===================================================================== */
:root {
  --color-primary:        #0F2A44;   /* Navy */
  --color-primary-700:    #143553;
  --color-primary-900:    #081A2B;
  --color-primary-soft:   #E6ECF3;   /* Pale navy tint */

  --color-accent:         #2BC78A;   /* Green */
  --color-accent-600:     #20B279;
  --color-accent-200:     #C6F0DD;
  --color-accent-100:     #E6F8EF;

  --color-cta:            #F27B35;   /* Keep warm orange CTA for contrast */
  --color-cta-hover:      #DC6A28;

  --color-bg:             var(--color-off-white);
  --color-bg-alt:         var(--color-sand);
  --color-bg-soft:        var(--color-accent-100);
  --color-surface:        var(--color-white);
  --color-text:           var(--color-charcoal);
  --color-text-muted:     var(--color-ink-500);
  --color-on-primary:     var(--color-off-white);
  --color-on-accent:      var(--color-primary-900);
  --color-on-cta:         var(--color-white);

  --grad-hero: radial-gradient(1200px 600px at 88% -10%, rgba(43,199,138,0.14), transparent 60%),
               radial-gradient(900px 500px at -5% 10%, rgba(15,42,68,0.06), transparent 60%);
}

/* ---- Prefer reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}