/* ==========================================================================
   CARFIX OFFICIAL DESIGN SYSTEM — TOKENS & VARIABLES
   متوافقة 100% مع AGENTS.md + Mobile/Desktop UI Guidelines
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --------------------------------------------------------------------------
     1. BRAND COLORS (Executive Dark Charcoal Theme)
     -------------------------------------------------------------------------- */
  /* Surfaces & Backgrounds */
  --bg-dark:           #0F1012;   /* Deep Executive Charcoal Background */
  --bg-dark-alt:       #131510;   /* Secondary Deep Background */
  --bg-surface:        #1A1C1E;   /* Base Container Surface */
  --bg-card:           #232528;   /* Elevated Cards & Inputs */
  --bg-card-hover:     #2D3035;   /* Interactive Card Hover State */
  --bg-glass:          rgba(26, 28, 30, 0.85);

  /* Outlines & Borders */
  --border-subtle:     #3F444D;   /* Executive Dark Border */
  --border-hover:      #575D6A;   /* Active Hover Border */
  --border-accent:     rgba(255, 107, 53, 0.45);

  /* Brand Accents */
  --accent-orange:       #FF6B35;   /* Primary Vivid CarFix Orange */
  --accent-orange-hover: #E55824;   /* Darker Vivid Orange for Hover */
  --accent-orange-dim:   rgba(255, 107, 53, 0.14);
  --accent-orange-glow:  0 8px 24px rgba(255, 107, 53, 0.25);

  --accent-olive:        #4A5240;   /* Trust & Quality Secondary Olive */
  --accent-olive-hover:  #3A4132;
  --accent-olive-dim:    rgba(74, 82, 64, 0.25);

  /* Mini-App Specific Branding Tokens */
  --app-repair:        #FF6B35;   /* Engine Orange */
  --app-repair-bg:     rgba(255, 107, 53, 0.12);
  --app-wash:          #0288D1;   /* Detailing Aqua Blue */
  --app-wash-bg:       rgba(2, 136, 209, 0.12);
  --app-market:        #2E7D32;   /* Showroom Emerald Green */
  --app-market-bg:     rgba(46, 125, 50, 0.12);
  --app-parts:         #7B1FA2;   /* Royal Purple */
  --app-parts-bg:      rgba(123, 31, 162, 0.12);
  --app-towing:        #C62828;   /* SOS Emergency Red */
  --app-towing-bg:     rgba(198, 40, 40, 0.12);

  /* Text Hierarchy (High Contrast White) */
  --text-white:        #F1F0F4;   /* Primary White Text */
  --text-primary:      #F1F0F4;
  --text-secondary:    rgba(241, 240, 244, 0.72);
  --text-muted:        rgba(241, 240, 244, 0.45);
  --text-disabled:     rgba(241, 240, 244, 0.25);

  /* --------------------------------------------------------------------------
     2. TYPOGRAPHY
     -------------------------------------------------------------------------- */
  --font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1.00rem;   /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.35rem;   /* 21px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */

  --font-normal: 400;
  --font-medium: 600;
  --font-bold:   700;
  --font-black:  900;

  --line-height-tight: 1.25;
  --line-height-normal: 1.6;

  /* --------------------------------------------------------------------------
     3. SPACING & DIMENSIONS
     -------------------------------------------------------------------------- */
  --sidebar-width:  240px;
  --topbar-height:  64px;

  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.50rem;  /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1.00rem;  /* 16px */
  --space-5: 1.50rem;  /* 24px */
  --space-6: 2.00rem;  /* 32px */
  --space-7: 2.50rem;  /* 40px */

  /* --------------------------------------------------------------------------
     4. BORDER RADIUS
     -------------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     5. SHADOWS & ELEVATION
     -------------------------------------------------------------------------- */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);

  /* --------------------------------------------------------------------------
     6. TRANSITIONS & ANIMATIONS
     -------------------------------------------------------------------------- */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base Body Styles */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg-dark);
  color: var(--text-white);
  font-family: var(--font-family);
  direction: rtl;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-orange);
}