/* MASARAT PRO design tokens.
   Primitives hold raw brand values; everything else in the app uses the semantic layer,
   so the identity can be re-skinned for another car wash by editing this file only. */

@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Alexandria'; font-weight: 600; font-display: swap; src: url('/fonts/alexandria/alexandria-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-weight: 800; font-display: swap; src: url('/fonts/alexandria/alexandria-arabic-800-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-weight: 500; font-display: swap; src: url('/fonts/alexandria/alexandria-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Alexandria'; font-weight: 600; font-display: swap; src: url('/fonts/alexandria/alexandria-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Alexandria'; font-weight: 800; font-display: swap; src: url('/fonts/alexandria/alexandria-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF; }

:root {
  /* ---- primitives ---- */
  --mp-navy-950: #050b18;
  --mp-navy-900: #081229;
  --mp-navy-850: #0b1733;
  --mp-navy-800: #0f1f42;
  --mp-navy-700: #16295a;
  --mp-blue-800: #0b4fc4;
  --mp-blue-500: #2f86ff;
  --mp-aqua-400: #5cc2ff;
  --mp-ice-100: #e6f1fc;
  --mp-gray-300: #b6c4d8;
  --mp-gray-500: #8196b5;
  --mp-white: #ffffff;
  --mp-green-400: #3ccf91;
  --mp-red-400: #ff6b7a;
  --mp-amber-400: #f5bd4f;

  /* ---- semantic ---- */
  --bg: var(--mp-navy-950);
  --bg-glow: radial-gradient(1200px 600px at 85% -10%, rgba(47, 134, 255, 0.16), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(92, 194, 255, 0.08), transparent 60%);
  --surface: var(--mp-navy-850);
  --surface-2: var(--mp-navy-800);
  --surface-3: var(--mp-navy-700);
  --border: rgba(140, 180, 255, 0.12);
  --border-strong: rgba(140, 180, 255, 0.24);
  --text: #eaf2ff;
  --text-muted: var(--mp-gray-500);
  --text-soft: var(--mp-gray-300);
  --accent: var(--mp-blue-500);
  --accent-strong: var(--mp-blue-800);
  --accent-2: var(--mp-aqua-400);
  --accent-soft: rgba(47, 134, 255, 0.14);
  --on-accent: var(--mp-white);
  --success: var(--mp-green-400);
  --danger: var(--mp-red-400);
  --warning: var(--mp-amber-400);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --glow: 0 0 0 1px rgba(92, 194, 255, 0.55), 0 10px 28px rgba(47, 134, 255, 0.3);
  --focus: 0 0 0 3px rgba(92, 194, 255, 0.45);

  --font-ui: 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-brand: 'Alexandria', var(--font-ui);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --tabbar-h: 62px;
  --sidebar-w: 264px;
}