/* ══════════════════════════════════════════════════════════
   CABIDOTS TECHNOLOGIES — css/tokens.css
   Brand palette extracted from logo:
     · Deep navy blue  #003580 (dominant arc)
     · Ocean blue      #0072c6 (mid blue gradient)
     · Sky blue        #18b4f0 (light blue)
     · Vivid orange    #e04d00 (circuit nodes)
     · Amber orange    #f5a623 (highlight nodes)
     · White / Light greys for backgrounds
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colours ──────────────────────────────── */
  --navy:         #002b70;
  --navy-dark:    #001a47;
  --navy-mid:     #003d9e;
  --blue:         #0072c6;
  --blue-light:   #18b4f0;

  --orange:       #e04d00;
  --orange-light: #ff6820;
  --orange-glow:  rgba(224,77,0,0.25);
  --amber:        #f5a623;

  /* ── Neutrals ────────────────────────────────────── */
  --white:        #ffffff;
  --off-white:    #f7f8fc;
  --grey-1:       #eef0f6;
  --grey-2:       #d8dce8;
  --grey-3:       #9aa0b8;
  --grey-4:       #5c647e;
  --grey-5:       #2e3347;
  --dark:         #111624;

  /* ── Semantic roles ──────────────────────────────── */
  --bg-page:      var(--white);
  --bg-alt:       var(--off-white);
  --bg-dark:      var(--navy-dark);
  --bg-impact:    var(--navy);

  --text-primary:  var(--dark);
  --text-secondary:var(--grey-4);
  --text-muted:    var(--grey-3);
  --text-on-dark:  rgba(255,255,255,0.88);
  --text-on-dark-2:rgba(255,255,255,0.55);

  --accent:        var(--orange);
  --accent-2:      var(--blue);
  --accent-glow:   var(--orange-glow);

  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);
  --border-blue:   rgba(0,114,198,0.2);

  /* ── Typography ─────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  /* ── Radius ─────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
  --shadow:     0 4px 20px rgba(0,0,0,0.1);
  --shadow-md:  0 8px 40px rgba(0,0,0,0.13);
  --shadow-lg:  0 16px 60px rgba(0,0,0,0.18);
  --shadow-nav: 0 4px 24px rgba(0,0,0,0.12);

  --shadow-orange: 0 4px 24px rgba(224,77,0,0.3);
  --shadow-blue:   0 4px 24px rgba(0,114,198,0.3);

  /* ── Motion ─────────────────────────────────────── */
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --ease-out:  cubic-bezier(0,0,0.2,1);
  --ease-in:   cubic-bezier(0.4,0,1,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur:       0.3s;
  --dur-slow:  0.6s;
}