/* ==========================================================================
   TruckerPro Tools Design System
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color Palette
     ------------------------------------------------------------------ */
  --tp-primary: #c14a17;
  --tp-primary-dark: #a33e12;
  --tp-primary-light: #d4621f;
  --tp-accent: #167d42;
  --tp-accent-dark: #0f5c30;
  --tp-purple: #8B5CF6;

  /* ------------------------------------------------------------------
     Semantic Colors
     ------------------------------------------------------------------ */
  --tp-success: #10B981;
  --tp-warning: #F59E0B;
  --tp-danger: #EF4444;
  --tp-info: #3B82F6;

  /* ------------------------------------------------------------------
     Dark Theme Surfaces
     ------------------------------------------------------------------ */
  --tp-bg-base: #0F0F1A;
  --tp-bg-card: #1A1A2E;
  --tp-bg-elevated: #252540;
  --tp-bg-input: rgba(255, 255, 255, 0.05);

  /* ------------------------------------------------------------------
     Text Colors
     ------------------------------------------------------------------ */
  --tp-text-primary: #ffffff;
  --tp-text-secondary: #cbd5e1;
  --tp-text-muted: #94a3b8;

  /* ------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------ */
  --tp-border-subtle: rgba(255, 255, 255, 0.05);
  --tp-border-default: rgba(255, 255, 255, 0.1);
  --tp-border-focus: var(--tp-primary);

  /* ------------------------------------------------------------------
     Spacing Scale (8px base)
     ------------------------------------------------------------------ */
  --tp-space-1: 0.25rem;   /* 4px  */
  --tp-space-2: 0.5rem;    /* 8px  */
  --tp-space-3: 0.75rem;   /* 12px */
  --tp-space-4: 1rem;      /* 16px */
  --tp-space-5: 1.5rem;    /* 24px */
  --tp-space-6: 2rem;      /* 32px */
  --tp-space-7: 3rem;      /* 48px */
  --tp-space-8: 4rem;      /* 64px */

  /* ------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------ */
  --tp-radius-sm: 6px;
  --tp-radius-md: 8px;
  --tp-radius-lg: 12px;
  --tp-radius-xl: 16px;
  --tp-radius-pill: 50px;

  /* ------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------ */
  --tp-shadow-focus: 0 0 0 3px rgba(193, 74, 23, 0.35);
  --tp-shadow-hover: 0 0 20px rgba(193, 74, 23, 0.2);
  --tp-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);

  /* ------------------------------------------------------------------
     Gradients
     ------------------------------------------------------------------ */
  --tp-gradient-primary: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-light));
  --tp-gradient-accent: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-dark));
  --tp-gradient-ai: linear-gradient(135deg, var(--tp-purple), #a78bfa);
  --tp-gradient-hero: radial-gradient(
    ellipse at 50% 0%,
    rgba(193, 74, 23, 0.15) 0%,
    rgba(15, 15, 26, 0) 70%
  );

  /* ------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------ */
  --tp-font-heading: 'Space Grotesk', sans-serif;
  --tp-font-body: 'DM Sans', sans-serif;
  --tp-font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   Base Resets for Tools Pages
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--tp-bg-base);
  font-family: var(--tp-font-body);
  color: var(--tp-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}