/* ===========================================================
   DCS AUTO — COLOR TOKENS
   Sampled directly from provided logo artwork.
   Carbon black + red = shared brand spine (both sub-brands).
   Blue = DCS Auto only (fleet/professional accent, from logo stroke).
   =========================================================== */

:root {
  /* ---- Base: Carbon (near-black, warm-neutral undertone) ---- */
  --carbon-950: #0c0e11;
  --carbon-900: #13171c; /* sampled exact from logo plate */
  --carbon-800: #1b2028;
  --carbon-700: #262c36;
  --carbon-600: #3a4250;
  --carbon-500: #545e6e;
  --carbon-400: #7c8695;
  --carbon-300: #a8b0bb;
  --carbon-200: #ccd1d8;
  --carbon-100: #e7e9ec;
  --carbon-50:  #f5f6f7;

  /* ---- Base: Red (Deadly Customs primary, DCS Auto secondary) ---- */
  --red-700: #d61f1f;
  --red-600: #ef2a2a;
  --red-500: #ff3636; /* sampled exact from Deadly Customs wordmark */
  --red-400: #ff5c5c;
  --red-300: #ff8a8a;
  --red-100: #ffe1e1;

  /* ---- Base: Blue (DCS Auto accent, from Primary lockup stroke) ---- */
  --blue-700: #1c5fd6;
  --blue-600: #2f7bf0;
  --blue-500: #3b99ff; /* sampled exact from Primary logo outline */
  --blue-300: #8ec4ff;
  --blue-100: #dcedff;

  /* ---- Pure ---- */
  --white: #ffffff;
  --black: #000000;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--carbon-900);
  --surface-raised: var(--carbon-800);
  --surface-sunken: var(--carbon-950);
  --surface-card: var(--carbon-800);
  --surface-light: var(--white);
  --surface-light-sunken: var(--carbon-50);

  /* ---- Semantic: text ---- */
  --text-on-dark-primary: var(--white);
  --text-on-dark-secondary: var(--carbon-300);
  --text-on-dark-muted: var(--carbon-500);
  --text-on-light-primary: var(--carbon-900);
  --text-on-light-secondary: var(--carbon-600);
  --text-on-light-muted: var(--carbon-400);

  /* ---- Semantic: brand accents ---- */
  --accent-dcs: var(--blue-500);       /* DCS Auto — fleet / professional */
  --accent-deadly: var(--red-500);     /* Deadly Customs — enthusiast / bold */
  --accent-deadly-hover: var(--red-400);
  --accent-dcs-hover: var(--blue-600);

  /* ---- Semantic: borders ---- */
  --border-on-dark: rgba(255, 255, 255, 0.12);
  --border-on-dark-strong: rgba(255, 255, 255, 0.24);
  --border-on-light: rgba(19, 23, 28, 0.12);

  /* ---- Semantic: overlays / scrims (for full-bleed imagery) ---- */
  --scrim-bottom: linear-gradient(180deg, rgba(12,14,17,0) 0%, rgba(12,14,17,0.92) 100%); /* @kind other */
  --scrim-full: rgba(12, 14, 17, 0.6);
}