/* =========================================================
   Big Kahuna Car Hire — Design Tokens
   SINGLE SOURCE OF TRUTH for every color, size, radius, shadow
   and spacing value used across the public site AND the admin
   panel. Every other CSS file in /components references these
   variables instead of raw hex/px — change a value here and it
   cascades everywhere automatically.
   ========================================================= */

:root {
  /* ---- Brand colors ("Sunset Kahuna") -------------------- */
  --color-primary-900: #0B2E3D;
  --color-primary-800: #123C4E;
  --color-primary-700: #1B5468;
  --color-accent-500: #FF6B4A;
  --color-accent-600: #E8502E;
  --color-charcoal: #1B2426;
  --color-sand: #FAF5EC;
  --color-sand-dark: #F0E8D8;
  --color-white: #FFFFFF;

  /* ---- Status colors (shared by badges, alerts, form errors) */
  --color-success: #1E7B4D;
  --color-success-bg: #E1F0EA;
  --color-error: #C0392B;
  --color-error-bg: #FBE6E4;
  --color-warning: #B7791F;
  --color-warning-bg: #FDF3E1;
  --color-info: #1D5B9E;
  --color-info-bg: #E5EFFB;
  --color-neutral: #4A4FA0;
  --color-neutral-bg: #E9EAF6;

  /* ---- Text / border neutrals ----------------------------- */
  --color-text: var(--color-charcoal);
  --color-text-muted: #55676B;
  --color-text-soft: #3A4A4D;
  --color-text-faint: #8A9A9E;
  --color-border: #E1E6E5;
  --color-bg-page: #F4F6F5;
  --color-bg-subtle: #FAFBFB;
  --color-warning-text: #5A4318;

  /* ---- Typography ------------------------------------------ */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.1rem;
  --text-lg: 1.3rem;
  --text-xl: clamp(1.6rem, 4vw, 2.4rem);
  --text-2xl: clamp(2.2rem, 5vw, 3.6rem);

  /* ---- Spacing scale (drives padding/margin/gap site-wide) - */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-section-y: 70px;

  /* ---- Radius / shape ---------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 30px;

  /* ---- Shadows ------------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(11, 46, 61, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 46, 61, 0.14);

  /* ---- Layout --------------------------------------------------- */
  --container: 1200px;
  --header-height: 76px;
  --admin-sidebar-width: 250px;
}