/* Koubit — Color tokens
   Sampled directly from the source marketing site (uploads/Koubit Website.png). */
:root {
  /* Base palette */
  --navy-950: #0a2130;   /* deepest section bg (Who We Are, testimonials) */
  --navy-900: #0c2b40;   /* primary brand background (hero, services) */
  --navy-800: #0e2534;
  --navy-700: #253947;   /* lighter slate-navy (Why Choose Us, footer) */
  --navy-600: #3a4f5c;   /* borders/dividers on dark */

  --teal-500: #0abcc2;   /* primary brand accent — CTAs, links, headings on dark */
  --teal-400: #2dd4d0;   /* lighter teal for icon strokes / hover */
  --teal-300: #5fe6dd;

  --violet-500: #5b3a8e; /* secondary accent seen in logo + illustration accents */
  --green-400: #7ed957;  /* tertiary accent, used sparingly in illustration charts */

  --cream-100: #fffbee;  /* illustration card background */
  --white: #ffffff;

  /* Text */
  --text-on-dark-primary: #ffffff;
  --text-on-dark-secondary: rgba(255,255,255,0.78);
  --text-on-dark-muted: rgba(255,255,255,0.56);
  --text-on-cream: #0c2b40;

  /* Semantic aliases */
  --bg-page: var(--navy-900);
  --bg-section-alt: var(--navy-950);
  --bg-section-alt-2: var(--navy-700);
  --bg-card: var(--navy-800);
  --bg-illustration-panel: var(--cream-100);

  --brand-primary: var(--teal-500);
  --brand-primary-hover: var(--teal-400);
  --brand-secondary: var(--violet-500);

  --border-subtle: rgba(255,255,255,0.14);
  --border-strong: var(--teal-500);

  --focus-ring: var(--teal-400);

  --state-success: #37c98f;
  --state-warning: #e6b93a;
  --state-danger: #e3596b;
  --state-info: var(--teal-500);
}