/* =========================================================
   CARGO IN MOTION — DESIGN TOKENS
   Dedicated to deliver
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Roboto:wght@400;500;700;900&display=swap");

:root {
  /* ---------- CORE PALETTE (sampled from brand swatches) ---------- */
  --cm-black:     #000000;   /* (01) Asfalt zwart        */
  --cm-indigo:    #2E388F;   /* (02) Diepblauw / violet  */
  --cm-teal:      #4BA7B9;   /* (03) Petrol teal         */
  --cm-mint:      #5CC1BB;   /* (04) Mint / seafoam      */
  --cm-sky:       #4DAAE2;   /* (05) Hemelblauw          */

  /* ---------- DERIVED TINTS / NEUTRALS ---------- */
  --cm-night:     #050608;   /* deepest near-black bg   */
  --cm-coal:      #0C0E15;   /* card / elevated surface */
  --cm-graphite:  #16192A;   /* divider, alt surface    */
  --cm-white:     #FFFFFF;
  --cm-fog:       #C9D2E2;   /* body grey on dark       */
  --cm-mist:      #6B7896;   /* muted captions          */
  --cm-ice:       #DDF1F4;   /* light section bg        */

  /* indigo / sky tints */
  --cm-indigo-soft: rgba(46, 56, 143, 0.18);
  --cm-sky-soft:    rgba(77, 170, 226, 0.18);
  --cm-mint-soft:   rgba(92, 193, 187, 0.18);

  /* ---------- SEMANTIC ROLES ---------- */
  --bg-primary:   var(--cm-black);
  --bg-elevated:  var(--cm-coal);
  --bg-light:     var(--cm-ice);
  --bg-hero:      linear-gradient(135deg,
                    var(--cm-black) 0%,
                    var(--cm-indigo) 38%,
                    var(--cm-teal) 70%,
                    var(--cm-sky) 100%);

  --fg-primary:   var(--cm-white);
  --fg-secondary: var(--cm-fog);
  --fg-muted:     var(--cm-mist);
  --fg-accent:    var(--cm-sky);
  --fg-on-light:  var(--cm-black);

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-on-light: rgba(0, 0, 0, 0.08);
  --border-accent:  rgba(77, 170, 226, 0.35);

  /* ---------- CTA ---------- */
  --cta-bg:         var(--cm-sky);
  --cta-bg-hover:   var(--cm-mint);
  --cta-fg:         var(--cm-black);
  --cta-outline-fg: var(--cm-sky);
  --cta-outline-bd: rgba(77, 170, 226, 0.55);

  /* ---------- TYPE ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark:"Roboto", system-ui, -apple-system, sans-serif; /* logo wordmark — matches trucks & building */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;
  --text-hero: 120px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.18em;

  /* ---------- SPACE ---------- */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4: 16px;
  --space-6:  24px;  --space-8:  32px;  --space-12: 48px;  --space-16:64px;
  --space-24: 96px;  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---------- GLOW / SHADOW ---------- */
  --glow-sky:    0 0 36px rgba(77,170,226,0.45), 0 0 120px rgba(77,170,226,0.18);
  --glow-mint:   0 0 36px rgba(92,193,187,0.4),  0 0 120px rgba(92,193,187,0.15);
  --glow-indigo: 0 0 80px rgba(46,56,143,0.55);
  --shadow-card: 0 24px 60px rgba(0,0,0,0.65), 0 2px 0 rgba(255,255,255,0.03) inset;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad: 32px;

  /* ---------- MOTION ---------- */
  --motion-ring-spin: 16s;   /* logo full rotation        */
  --motion-ring-fast: 7s;    /* hover state               */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;
}

/* =========================================================
   BASE
   ========================================================= */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* =========================================================
   THE ROTATING WHEEL — uses the actual brand PNG
   --------------------------------------------------------- */
.cm-mark {
  --size: 120px;
  width: var(--size);
  height: var(--size);
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.cm-mark__img {
  width: 100%;
  height: 100%;
  display: block;
  animation: cm-spin var(--motion-ring-spin) var(--ease-linear) infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
.cm-mark:hover .cm-mark__img,
.cm-mark.is-fast .cm-mark__img {
  animation-duration: var(--motion-ring-fast);
}
.cm-mark.is-paused .cm-mark__img {
  animation-play-state: paused;
}

@keyframes cm-spin {
  to { transform: rotate(360deg); }
}
@keyframes cm-spin-reverse {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-mark__img { animation: none; }
}