/* ============================================================================
   Baarq Design System — All CSS custom properties (design tokens)
   ============================================================================ */
:root {
    /* ── Brand: Navy ───────────────────────────────────────────────────── */
    --navy-950: #061726;
    --navy-900: #08223a;
    --navy-800: #0a2d4d;
    --navy-700: #0c2e55;
    --navy-600: #134272;
    --navy-500: #1c578f;
    --navy-400: #3c74a8;
    --navy-300: #7099c2;
    --navy-200: #adc4da;
    --navy-100: #d8e3ee;
    --navy-50:  #eef3f8;

    /* ── Brand: Lightning Orange ───────────────────────────────────────── */
    --orange-900: #7a3b00;
    --orange-800: #a14e00;
    --orange-700: #c75e00;
    --orange-600: #e66e00;
    --orange-500: #f87800;
    --orange-400: #ff9226;
    --orange-300: #ffb061;
    --orange-200: #ffcf9e;
    --orange-100: #ffe7cc;
    --orange-50:  #fff4e8;

    /* ── Gold ──────────────────────────────────────────────────────────── */
    --gold-500: #f5a524;
    --gold-400: #f7b54a;
    --gold-100: #fdeccb;

    /* ── Neutrals ──────────────────────────────────────────────────────── */
    --white:    #ffffff;
    --gray-50:  #f7f9fb;
    --gray-100: #eef2f7;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --black:    #050b14;

    /* ── Status ────────────────────────────────────────────────────────── */
    --green-600: #15803d;
    --green-500: #1e9e5a;
    --green-100: #d8f3e3;
    --red-600:   #c2363b;
    --red-500:   #e5484d;
    --red-100:   #fbdcdd;
    --blue-600:  #1d4ed8;
    --blue-500:  #2563eb;
    --blue-100:  #dbe7fe;

    /* ── Semantic color aliases ────────────────────────────────────────── */
    --color-primary:        var(--navy-700);
    --color-primary-hover:  var(--navy-800);
    --color-primary-press:  var(--navy-900);
    --color-on-primary:     var(--white);
    --color-accent:         var(--orange-500);
    --color-accent-hover:   var(--orange-600);
    --color-accent-press:   var(--orange-700);
    --color-on-accent:      var(--white);
    --color-accent-soft:    var(--orange-50);
    --brand-cta:            var(--orange-500);
    --brand-cta-text:       var(--white);

    /* Text */
    --text-strong:       var(--navy-900);
    --text-body:         var(--gray-700);
    --text-muted:        var(--gray-500);
    --text-faint:        var(--gray-400);
    --text-on-dark:      var(--white);
    --text-on-dark-muted: var(--navy-200);
    --text-link:         var(--orange-600);

    /* Surfaces */
    --surface-page:         var(--gray-50);
    --surface-card:         var(--white);
    --surface-raised:       var(--white);
    --surface-sunken:       var(--gray-100);
    --surface-inverse:      var(--navy-700);
    --surface-accent-tint:  var(--orange-50);

    /* Borders */
    --border-subtle:  var(--gray-200);
    --border-default: var(--gray-300);
    --border-strong:  var(--gray-400);
    --border-accent:  var(--orange-500);
    --ring-focus:     var(--orange-400);

    /* Status semantic */
    --color-success:      var(--green-500);
    --color-success-soft: var(--green-100);
    --color-danger:       var(--red-500);
    --color-danger-soft:  var(--red-100);
    --color-warning:      var(--gold-500);
    --color-info:         var(--blue-500);
    --color-info-soft:    var(--blue-100);
    --color-rating:       var(--gold-500);

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-base:         'Tajawal', 'Segoe UI', system-ui, sans-serif;
    --font-display:      'Cairo', 'Tajawal', system-ui, sans-serif;
    --font-numeric:      'Tajawal', system-ui, sans-serif;

    --weight-regular:    400;
    --weight-medium:     500;
    --weight-bold:       700;
    --weight-extrabold:  800;
    --weight-black:      900;

    --text-display-2xl: 64px;
    --text-display-xl:  52px;
    --text-display-lg:  42px;
    --text-h1:          34px;
    --text-h2:          28px;
    --text-h3:          23px;
    --text-h4:          20px;
    --text-lg:          18px;
    --text-base:        16px;
    --text-sm:          14px;
    --text-xs:          13px;
    --text-2xs:         11px;

    --leading-tight:    1.15;
    --leading-snug:     1.3;
    --leading-normal:   1.5;
    --leading-relaxed:  1.75;

    /* ── Spacing ───────────────────────────────────────────────────────── */
    --space-0:   0;
    --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-9:   48px;
    --space-10:  64px;
    --space-11:  80px;
    --space-12:  96px;
    --space-13: 128px;

    --container-sm:  640px;
    --container-md:  880px;
    --container-lg: 1120px;
    --container-xl: 1280px;
    --tap-min:       44px;

    /* Z-index */
    --z-base:    1;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-modal:   1100;
    --z-toast:   1200;

    /* ── Effects: radii, shadows, motion ──────────────────────────────── */
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   22px;
    --radius-2xl:  32px;
    --radius-pill: 999px;
    --radius-full: 50%;

    --border-1: 1px;
    --border-2: 2px;

    --shadow-xs: 0 1px 2px rgba(12,46,85,.06);
    --shadow-sm: 0 1px 3px rgba(12,46,85,.08), 0 1px 2px rgba(12,46,85,.05);
    --shadow-md: 0 4px 14px rgba(12,46,85,.08), 0 2px 6px rgba(12,46,85,.05);
    --shadow-lg: 0 12px 30px rgba(12,46,85,.12), 0 4px 10px rgba(12,46,85,.06);
    --shadow-xl: 0 24px 60px rgba(12,46,85,.16);

    --shadow-accent: 0 8px 22px rgba(248,120,0,.28);
    --shadow-focus:  0 0 0 3px rgba(255,146,38,.45);

    --ease-out:     cubic-bezier(.16,1,.3,1);
    --ease-in-out:  cubic-bezier(.65,0,.35,1);
    --duration-fast:   140ms;
    --duration-normal: 220ms;
    --duration-slow:   360ms;
}

/* ── Base document resets ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color-scheme: light;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-body);
    background: var(--surface-page);
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-strong);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
    font-weight: var(--weight-bold);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-4); line-height: var(--leading-relaxed); }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

::selection { background: var(--orange-100); color: var(--navy-900); }

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}