/* ============================================================
   MOTOR COMERCIAL — Design Tokens
   CSS Custom Properties (Design System Foundation)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {

  /* ─────────────────────────────────────────
     COLOR PALETTE — Raw Scale
  ───────────────────────────────────────── */

  /* Navy (Primary Brand) */
  --navy-50:  #E8EDF5;
  --navy-100: #C5D0E6;
  --navy-200: #9EB1D4;
  --navy-300: #6D8FBE;
  --navy-400: #4570A9;
  --navy-500: #1E4F93;
  --navy-600: #173D74;
  --navy-700: #0F2C56;
  --navy-800: #0A1E3C; /* ← BRAND PRIMARY */
  --navy-900: #06121F;

  /* Copper (Secondary Brand) */
  --copper-50:  #FAF2EC;
  --copper-100: #F0D9C6;
  --copper-200: #E4BFA0;
  --copper-300: #D4A07A;
  --copper-400: #C48D62;
  --copper-500: #B17D60; /* ← BRAND SECONDARY */
  --copper-600: #97653A;
  --copper-700: #7A4F2C;
  --copper-800: #5C3920;
  --copper-900: #3C2314;

  /* Teal (Interactive Accent) */
  --teal-50:  #E4F9F8;
  --teal-100: #B3EFED;
  --teal-200: #7FE4E1;
  --teal-300: #4AD8D5;
  --teal-400: #22CECA;
  --teal-500: #0ABFBC; /* ← INTERACTIVE PRIMARY */
  --teal-600: #089C99;
  --teal-700: #067775;
  --teal-800: #045453;
  --teal-900: #023332;

  /* Neutral */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F4F5F7;
  --neutral-100: #E8EAED;
  --neutral-200: #D1D5DB;
  --neutral-300: #B0B7C0;
  --neutral-400: #8D95A0;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  /* ─────────────────────────────────────────
     SEMANTIC COLORS
  ───────────────────────────────────────── */

  /* Brand */
  --color-brand-primary:   var(--navy-800);
  --color-brand-secondary: var(--copper-500);
  --color-brand-accent:    var(--teal-500);

  /* Foreground */
  --color-fg-primary:   var(--navy-800);
  --color-fg-secondary: var(--neutral-600);
  --color-fg-tertiary:  var(--neutral-400);
  --color-fg-disabled:  var(--neutral-300);
  --color-fg-inverse:   var(--neutral-0);
  --color-fg-accent:    var(--teal-500);
  --color-fg-copper:    var(--copper-500);

  /* Backgrounds */
  --color-bg-primary:   var(--neutral-0);
  --color-bg-secondary: var(--neutral-50);
  --color-bg-tertiary:  var(--neutral-100);
  --color-bg-dark:      var(--navy-800);
  --color-bg-accent:    var(--teal-50);
  --color-bg-copper:    var(--copper-50);

  /* Borders */
  --color-border-default: var(--neutral-100);
  --color-border-strong:  var(--neutral-200);
  --color-border-accent:  var(--teal-500);
  --color-border-brand:   var(--navy-800);

  /* Interactive */
  --color-interactive-default:  var(--teal-500);
  --color-interactive-hover:    var(--teal-600);
  --color-interactive-pressed:  var(--teal-700);
  --color-interactive-disabled: var(--neutral-200);

  /* Status */
  --color-success:        #10B981;
  --color-success-light:  #D1FAE5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-error:          #EF4444;
  --color-error-light:    #FEE2E2;
  --color-info:           var(--teal-500);
  --color-info-light:     var(--teal-50);

  /* Score / Pipeline */
  --color-score-high:   #10B981;
  --color-score-medium: #F59E0B;
  --color-score-low:    #EF4444;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — Font Families
  ───────────────────────────────────────── */

  --font-display:  'Manrope', 'Helvetica Neue', sans-serif;
  --font-body:     'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — Scale
  ───────────────────────────────────────── */

  /* Font Sizes */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  28px;
  --text-5xl:  32px;
  --text-6xl:  40px;
  --text-7xl:  48px;
  --text-8xl:  64px;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.03em;
  --tracking-wider:  0.06em;
  --tracking-widest: 0.12em;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — Semantic Roles
  ───────────────────────────────────────── */

  /* Display (hero, KPI values) */
  --type-display-font:    var(--font-display);
  --type-display-size:    var(--text-8xl);
  --type-display-weight:  var(--weight-extrabold);
  --type-display-leading: var(--leading-tight);
  --type-display-tracking: var(--tracking-tight);

  /* H1 */
  --type-h1-font:    var(--font-display);
  --type-h1-size:    var(--text-7xl);
  --type-h1-weight:  var(--weight-bold);
  --type-h1-leading: var(--leading-tight);
  --type-h1-tracking: var(--tracking-tight);

  /* H2 */
  --type-h2-font:    var(--font-display);
  --type-h2-size:    var(--text-5xl);
  --type-h2-weight:  var(--weight-bold);
  --type-h2-leading: var(--leading-snug);
  --type-h2-tracking: var(--tracking-snug);

  /* H3 */
  --type-h3-font:    var(--font-display);
  --type-h3-size:    var(--text-3xl);
  --type-h3-weight:  var(--weight-semibold);
  --type-h3-leading: var(--leading-snug);
  --type-h3-tracking: var(--tracking-snug);

  /* H4 */
  --type-h4-font:    var(--font-display);
  --type-h4-size:    var(--text-xl);
  --type-h4-weight:  var(--weight-semibold);
  --type-h4-leading: var(--leading-normal);
  --type-h4-tracking: var(--tracking-normal);

  /* H5 */
  --type-h5-font:    var(--font-body);
  --type-h5-size:    var(--text-lg);
  --type-h5-weight:  var(--weight-semibold);
  --type-h5-leading: var(--leading-normal);
  --type-h5-tracking: var(--tracking-normal);

  /* H6 */
  --type-h6-font:    var(--font-body);
  --type-h6-size:    var(--text-base);
  --type-h6-weight:  var(--weight-semibold);
  --type-h6-leading: var(--leading-normal);
  --type-h6-tracking: var(--tracking-wide);

  /* Body Large */
  --type-body-lg-font:    var(--font-body);
  --type-body-lg-size:    var(--text-lg);
  --type-body-lg-weight:  var(--weight-regular);
  --type-body-lg-leading: var(--leading-relaxed);

  /* Body Default */
  --type-body-font:    var(--font-body);
  --type-body-size:    var(--text-base);
  --type-body-weight:  var(--weight-regular);
  --type-body-leading: var(--leading-relaxed);

  /* Body Small */
  --type-body-sm-font:    var(--font-body);
  --type-body-sm-size:    var(--text-sm);
  --type-body-sm-weight:  var(--weight-regular);
  --type-body-sm-leading: var(--leading-normal);

  /* UI Label */
  --type-label-font:    var(--font-body);
  --type-label-size:    var(--text-sm);
  --type-label-weight:  var(--weight-medium);
  --type-label-leading: var(--leading-tight);
  --type-label-tracking: var(--tracking-wide);

  /* Caption / Overline */
  --type-caption-font:    var(--font-body);
  --type-caption-size:    var(--text-xs);
  --type-caption-weight:  var(--weight-medium);
  --type-caption-leading: var(--leading-tight);
  --type-caption-tracking: var(--tracking-wider);

  /* Code / Mono */
  --type-mono-font:    var(--font-mono);
  --type-mono-size:    var(--text-sm);
  --type-mono-weight:  var(--weight-medium);
  --type-mono-leading: var(--leading-normal);

  /* ─────────────────────────────────────────
     SPACING
  ───────────────────────────────────────── */

  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --layout-topbar-height: 48px;
  --layout-sidebar-collapsed: 48px;
  --layout-sidebar-expanded: 200px;
  --layout-content-max: 1280px;
  --layout-gutter: 24px;

  /* ─────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────── */

  --radius-none:   0px;
  --radius-xs:     2px;  /* inputs, table rows */
  --radius-sm:     4px;  /* buttons, badges */
  --radius-md:     6px;  /* cards, dropdowns */
  --radius-lg:     8px;  /* modals, drawers, panels */
  --radius-xl:     12px; /* large panels */
  --radius-2xl:    16px; /* hero cards */
  --radius-full:   9999px; /* pills, avatars */

  /* ─────────────────────────────────────────
     SHADOWS / ELEVATION
  ───────────────────────────────────────── */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(10, 30, 60, 0.06);
  --shadow-sm:   0 1px 4px rgba(10, 30, 60, 0.08);
  --shadow-md:   0 2px 8px rgba(10, 30, 60, 0.10);
  --shadow-lg:   0 4px 16px rgba(10, 30, 60, 0.12);
  --shadow-xl:   0 8px 32px rgba(10, 30, 60, 0.16);
  --shadow-2xl:  0 16px 64px rgba(10, 30, 60, 0.20);

  /* Focus ring */
  --shadow-focus: 0 0 0 3px rgba(10, 191, 188, 0.28);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.25);

  /* ─────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────── */

  --transition-fast:   150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow:   400ms ease-out;

  /* ─────────────────────────────────────────
     Z-INDEX
  ───────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* ─────────────────────────────────────────
   SEMANTIC ELEMENT DEFAULTS
───────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-primary);
  background-color: var(--color-bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--type-h1-font);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
  color: var(--color-fg-primary);
}

h2 {
  font-family: var(--type-h2-font);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
  color: var(--color-fg-primary);
}

h3 {
  font-family: var(--type-h3-font);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
  color: var(--color-fg-primary);
}

h4 {
  font-family: var(--type-h4-font);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  color: var(--color-fg-primary);
}

h5 {
  font-family: var(--type-h5-font);
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: var(--type-h5-leading);
  color: var(--color-fg-primary);
}

h6 {
  font-family: var(--type-h6-font);
  font-size: var(--type-h6-size);
  font-weight: var(--type-h6-weight);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-tracking);
  color: var(--color-fg-secondary);
  text-transform: uppercase;
}

p {
  font-family: var(--type-body-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--color-fg-secondary);
}

code, pre {
  font-family: var(--type-mono-font);
  font-size: var(--type-mono-size);
  font-weight: var(--type-mono-weight);
  background: var(--color-bg-tertiary);
  color: var(--color-fg-primary);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

a {
  color: var(--color-interactive-default);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-interactive-hover); text-decoration: underline; }