/* CrossCurrent Racing — Color tokens
   Near-black motorsport canvas with white type.
   Brand energy lives in the "current stripe": cyan -> blue -> red
   (the two flags / two currents converging on one racing line). */

:root {
  /* ---- Canvas & surfaces ---- */
  --cc-canvas: #000000;          /* true-black page floor */
  --cc-surface-soft: #0d0d0d;    /* spec cells, footer strips */
  --cc-surface-card: #16181c;    /* cards, secondary buttons, icon buttons */
  --cc-surface-elevated: #22252b;/* nested cards inside dark bands */
  --cc-carbon: #2b2b2b;          /* carbon-fibre spec surfaces */

  /* ---- Hairlines & borders ---- */
  --cc-hairline: #3a3d43;        /* 1px divider on dark surfaces */
  --cc-hairline-strong: #24262b; /* borders that read as elevation */

  /* ---- Text ---- */
  --cc-ink: #ffffff;             /* headlines + primary text */
  --cc-on-dark: #ffffff;
  --cc-body: #b7bcc4;            /* default running text (cool grey) */
  --cc-body-strong: #e5e8ec;     /* lead paragraph / emphasis */
  --cc-muted: #7c828c;           /* captions, footer links, breadcrumbs */
  --cc-on-primary: #ffffff;      /* text on a red fill */

  /* ---- Brand accents (the "current" palette) ---- */
  --cc-red: #e01f26;             /* signature racing red */
  --cc-red-deep: #a5141a;        /* pressed / darker red */
  --cc-blue: #1d5fc4;            /* union / heritage blue (mid stop) */
  --cc-blue-deep: #0a2a6b;       /* deepest current */
  --cc-cyan: #2fa5e8;            /* electric telemetry cyan (first stop) */

  /* The current stripe gradient (cyan -> blue -> red) */
  --cc-stripe: linear-gradient(90deg,
      var(--cc-cyan) 0%,
      var(--cc-cyan) 33%,
      var(--cc-blue) 33%,
      var(--cc-blue) 66%,
      var(--cc-red) 66%,
      var(--cc-red) 100%);
  /* Soft telemetry glow variant for hero/CTA underlays */
  --cc-stripe-soft: linear-gradient(90deg,
      var(--cc-cyan), var(--cc-blue), var(--cc-red));

  /* ---- Semantic ---- */
  --cc-warning: #f4b400;
  --cc-success: #14a05a;

  /* ---- Semantic aliases (use these in components) ---- */
  --text-primary: var(--cc-ink);
  --text-body: var(--cc-body);
  --text-strong: var(--cc-body-strong);
  --text-muted: var(--cc-muted);
  --surface-page: var(--cc-canvas);
  --surface-card: var(--cc-surface-card);
  --surface-soft: var(--cc-surface-soft);
  --surface-elevated: var(--cc-surface-elevated);
  --border-hairline: var(--cc-hairline);
  --accent: var(--cc-red);
  --accent-cool: var(--cc-blue);
}