/* JKENT Design Tokens — premium dark luxury, brushed chrome + bloodred motorcycle.
   Variable names retain ALAB's --ab-* shape so existing component CSS reads unchanged;
   values are flipped to a dark theme with red/chrome accents. New code should use
   the semantic --jk-* aliases at the bottom. */
:root {
  /* Brand cool axis (chrome) — was teal */
  --ab-teal: #c5c8cf;          /* chrome mid */
  --ab-teal-deep: #f1f1f4;     /* bright chrome — high-contrast accent on dark */
  --ab-teal-soft: #4a4f59;     /* chrome on dark */
  --ab-teal-mist: rgba(241, 241, 244, 0.06); /* very faint chrome wash */

  /* Brand hot axis (red) — was pink */
  --ab-pink: #c41e3a;          /* JKENT brand red (logo gear) */
  --ab-pink-deep: #e63946;     /* bright red — hover/active accents */
  --ab-pink-soft: #6e0e1c;     /* deep blood-red shadow */
  --ab-pink-mist: rgba(228, 57, 70, 0.16); /* red glow tint */

  /* Surfaces — dark graphite */
  --ab-cream: #0d0d10;         /* page bg — true black-graphite */
  --ab-cream-warm: #1a1c20;    /* warmer dark variant (panels) */

  /* Text — light on dark */
  --ab-ink: #f1f1f4;           /* primary text — bright chrome */
  --ab-ink-soft: #a8acb5;      /* secondary text */
  --ab-ink-faint: #6b6f78;     /* faint text */
  --ab-line: rgba(241, 241, 244, 0.08); /* hairline */

  /* Gradients — dark with red glow + chrome glow */
  --grad-brand: linear-gradient(135deg, #6e0e1c 0%, #e63946 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(110, 14, 28, 0.55) 0%, rgba(228, 57, 70, 0.30) 100%);
  --grad-page:
    radial-gradient(1200px 800px at 10% -10%, rgba(228, 57, 70, 0.10) 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, rgba(197, 200, 207, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #0d0d10 0%, #14151a 100%);

  /* Glass — dark glass instead of light */
  --glass-bg: rgba(26, 28, 32, 0.55);
  --glass-bg-strong: rgba(20, 21, 26, 0.78);
  --glass-border: rgba(241, 241, 244, 0.10);
  --glass-border-soft: rgba(241, 241, 244, 0.05);
  --glass-blur: blur(22px) saturate(140%);
  --glass-blur-sm: blur(12px) saturate(130%);

  /* Shadows — darker base + red-tinted glow on premium */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-lux:
    0 30px 80px -28px rgba(228, 57, 70, 0.45),
    0 10px 30px -10px rgba(0, 0, 0, 0.6);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Typography — industrial display + clean body */
  --font-display: "Bebas Neue", "Oswald", "Roboto Condensed", Impact, sans-serif;
  --font-display-serif: "Roboto Slab", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 420ms;

  /* z */
  --z-drawer: 50; --z-modal: 60; --z-toast: 70; --z-top: 100;

  /* ===== JKENT semantic aliases (preferred for new code) =====
     Direct red/chrome names. Use these in new files instead of --ab-*. */
  --jk-red: #c41e3a;
  --jk-red-deep: #6e0e1c;
  --jk-red-glow: #e63946;
  --jk-red-mist: rgba(228, 57, 70, 0.16);
  --jk-chrome: #e8e8ec;
  --jk-chrome-bright: #f1f1f4;
  --jk-chrome-soft: #c5c8cf;
  --jk-chrome-mid: #a8acb5;
  --jk-chrome-faint: #6b6f78;
  --jk-ink: #0d0d10;
  --jk-graphite: #14151a;
  --jk-steel: #1a1c20;
  --jk-panel: #2a2d33;
  --jk-text: #f1f1f4;
  --jk-text-soft: #a8acb5;
  --jk-text-faint: #6b6f78;
  --jk-line: rgba(241, 241, 244, 0.08);
}

/* Custom scrollbar — chrome with red glow */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--jk-red-glow) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--jk-chrome-mid) 0%, var(--jk-red-glow) 100%);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--jk-chrome) 0%, var(--jk-red) 100%);
  background-clip: padding-box;
  border: 2px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Text selection — red glow on dark */
::selection {
  background: var(--jk-red-mist);
  color: var(--jk-text);
}