/* ============================================================
   HARNEY MOTORS — THEME.CSS
   Design system tokens, brand colours, typography, base resets
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:          #080c14;
  --bg-surface:  #0f1420;
  --bg-card:     #141928;
  --bg-elevated: #1a2135;
  --bg-hover:    #1f2840;
  --bg-active:   #243050;

  /* Border */
  --border:       rgba(255,255,255,0.07);
  --border-light: rgba(255,255,255,0.12);
  --border-focus: rgba(255,255,255,0.25);

  /* Text */
  --text-primary:   #e8eaf2;
  --text-secondary: #8892b0;
  --text-tertiary:  #4a5470;
  --text-inverse:   #080c14;

  /* Semantic colours */
  --success:        #00d4aa;
  --success-dim:    rgba(0,212,170,0.12);
  --success-border: rgba(0,212,170,0.25);

  --warning:        #f0a500;
  --warning-dim:    rgba(240,165,0,0.12);
  --warning-border: rgba(240,165,0,0.25);

  --danger:        #ff5252;
  --danger-dim:    rgba(255,82,82,0.12);
  --danger-border: rgba(255,82,82,0.25);

  --info:        #6c8fff;
  --info-dim:    rgba(108,143,255,0.12);
  --info-border: rgba(108,143,255,0.25);

  --neutral:        #8892b0;
  --neutral-dim:    rgba(136,146,176,0.12);
  --neutral-border: rgba(136,146,176,0.2);

  /* Hold status */
  --hold-pending:  #b46aff;
  --hold-active:   #f0a500;
  --hold-expiring: #ff5252;

  /* Pipeline stage colours */
  --stage-order:      #6c8fff;
  --stage-production: #b46aff;
  --stage-produced:   #00b8d9;
  --stage-transit:    #f0a500;
  --stage-arrived:    #00d4aa;
  --stage-bonded:     #ff8c42;
  --stage-delivered:  #4caf7d;
  --stage-cancelled:  #ff5252;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition:      150ms ease;
  --transition-slow: 250ms ease;

  /* Shadows — subtle, no blur bloat */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

  /* Z-index scale */
  --z-base:    1;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-topbar:  400;
}

/* ── Brand colour system ──────────────────────────────────── */
/* Each brand gets: primary, glow (dim bg), border, text-on-bg */

/* BYD — Official crimson red #E91B21 (PMS 485 C)
   Slightly desaturated for dark-mode legibility            */
:root {
  --brand-byd:          #e8312a;
  --brand-byd-dim:      rgba(232,49,42,0.12);
  --brand-byd-border:   rgba(232,49,42,0.30);
  --brand-byd-text:     #ff7b75;
  --brand-byd-label:    #e8312a;
}

/* Changan — Official deep blue #003087 (current 2020 identity)
   Brightened slightly for visibility on dark bg            */
:root {
  --brand-changan:        #1a56db;
  --brand-changan-dim:    rgba(26,86,219,0.12);
  --brand-changan-border: rgba(26,86,219,0.30);
  --brand-changan-text:   #6c9fff;
  --brand-changan-label:  #1a56db;
}

/* Chery — Official cadmium red #E90019 (PMS 185 C)
   Shifted toward orange-red to differentiate from BYD     */
:root {
  --brand-chery:        #e84c0e;
  --brand-chery-dim:    rgba(232,76,14,0.12);
  --brand-chery-border: rgba(232,76,14,0.30);
  --brand-chery-text:   #ff8c5a;
  --brand-chery-label:  #e84c0e;
}

/* GAC — Official red #EC0A1E + silver #DFE0E4
   Uses their signature metallic silver as primary UI accent
   with red reserved for emphasis only                      */
:root {
  --brand-gac:        #8a9ab8;
  --brand-gac-dim:    rgba(138,154,184,0.12);
  --brand-gac-border: rgba(138,154,184,0.30);
  --brand-gac-text:   #b8c4d8;
  --brand-gac-label:  #8a9ab8;
  --brand-gac-red:    #ec0a1e;
}

/* Dynamic brand class utilities */
.brand-byd    { --brand: var(--brand-byd);    --brand-dim: var(--brand-byd-dim);    --brand-border: var(--brand-byd-border);    --brand-text: var(--brand-byd-text); }
.brand-changan{ --brand: var(--brand-changan); --brand-dim: var(--brand-changan-dim); --brand-border: var(--brand-changan-border); --brand-text: var(--brand-changan-text); }
.brand-chery  { --brand: var(--brand-chery);   --brand-dim: var(--brand-chery-dim);   --brand-border: var(--brand-chery-border);   --brand-text: var(--brand-chery-text); }
.brand-gac    { --brand: var(--brand-gac);     --brand-dim: var(--brand-gac-dim);     --brand-border: var(--brand-gac-border);     --brand-text: var(--brand-gac-text); }

/* ── Base reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); letter-spacing: -0.5px; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.3px; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-md);  }

p { color: var(--text-secondary); line-height: 1.7; }

a {
  color: var(--info);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--text-primary); }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-focus); }

/* ── Selection ────────────────────────────────────────────── */
::selection {
  background: var(--info-dim);
  color: var(--text-primary);
}

/* ── Focus ring ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}