/* ==========================================================================
   AL FAJAR TRANSPORT — Design Tokens v1.0
   Derived directly from ALFAJAR_TRNSPORT-BLACK.png
   Sampled: ink #0C0C0C · gold core #CEA449 · gold highlight #DEBC65
   Direction: "Dawn over the Haram" — ink, gold, Haram stone. Minimal, premium.
   Usage: load before Bootstrap output; consume via var() in theme CSS.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. BRAND CORE (locked — do not alter, these are the logo values)
     ---------------------------------------------------------------------- */
  --af-brand-ink:        #0C0C0C;  /* logo black */
  --af-brand-gold:       #CEA449;  /* logo gold (core fill) */
  --af-brand-gold-light: #DEBC65;  /* logo gold (highlight edge) */

  /* ----------------------------------------------------------------------
     2. COLOR SCALES
     ---------------------------------------------------------------------- */

  /* Ink (neutral, warm-free graphite so gold stays the only warm note) */
  --af-ink-950: #060606;
  --af-ink-900: #0C0C0C;
  --af-ink-800: #141414;
  --af-ink-700: #1F1F1F;
  --af-ink-600: #2E2E2E;
  --af-ink-500: #454545;
  --af-ink-400: #6B6B6B;
  --af-ink-300: #949494;
  --af-ink-200: #C6C6C4;
  --af-ink-100: #E4E3DF;
  --af-ink-50:  #F3F2EF;

  /* Gold */
  --af-gold-50:  #FBF6EA;
  --af-gold-100: #F4E9CE;
  --af-gold-200: #E9D6A4;
  --af-gold-300: #DEBC65;
  --af-gold-400: #D4AE55;
  --af-gold-500: #CEA449;  /* = brand gold */
  --af-gold-600: #B98F3A;
  --af-gold-700: #A87C2C;  /* min for LARGE text / icons on white (3.7:1) */
  --af-gold-800: #7E5A18;  /* min for BODY text on white (6.2:1) — AA */
  --af-gold-900: #573D0F;

  /* Stone — the pale limestone of the Haram, used for alternating bands */
  --af-stone-50: #FAF9F7;
  --af-stone-100:#F3F2EF;
  --af-stone-200:#E8E6E1;

  /* ----------------------------------------------------------------------
     3. SEMANTIC COLOR
     ---------------------------------------------------------------------- */
  --af-bg:              #FFFFFF;
  --af-bg-subtle:       var(--af-stone-100);
  --af-bg-inverse:      var(--af-ink-900);
  --af-bg-inverse-soft: var(--af-ink-800);
  --af-surface:         #FFFFFF;
  --af-surface-raised:  #FFFFFF;
  --af-surface-inverse: var(--af-ink-800);

  --af-text:            var(--af-ink-900);
  --af-text-muted:      var(--af-ink-500);
  --af-text-subtle:     var(--af-ink-400);
  --af-text-on-dark:    #FFFFFF;
  --af-text-on-dark-muted: rgba(255, 255, 255, 0.68);
  --af-text-gold:       var(--af-gold-800);   /* gold text on light bg */
  --af-text-gold-dark:  var(--af-gold-500);   /* gold text on ink bg — 8.4:1 */

  --af-border:          var(--af-ink-100);
  --af-border-strong:   var(--af-ink-200);
  --af-border-gold:     rgba(206, 164, 73, 0.45);
  --af-border-on-dark:  rgba(255, 255, 255, 0.12);
  --af-divider-hairline:rgba(12, 12, 12, 0.08);

  --af-accent:          var(--af-gold-500);
  --af-accent-hover:    var(--af-gold-600);
  --af-accent-press:    var(--af-gold-700);
  --af-accent-soft:     var(--af-gold-50);
  --af-focus-ring:      var(--af-gold-600);

  /* Status */
  --af-success: #2E7D5B;
  --af-warning: #C08A1E;
  --af-danger:  #B3261E;
  --af-info:    #2A5C8A;

  /* Channel colors (call / WhatsApp buttons) */
  --af-whatsapp: #25D366;

  /* Signature gradients — used ONCE each, hero horizon + gold sweep only */
  --af-grad-dawn: linear-gradient(180deg, #0C0C0C 0%, #141210 58%, #241C0E 100%);
  --af-grad-gold: linear-gradient(92deg, #A87C2C 0%, #CEA449 45%, #DEBC65 100%);
  --af-grad-fade-ink: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,0.78) 100%);

  /* ----------------------------------------------------------------------
     4. TYPOGRAPHY
     Display : Zain               — geometric, Gulf-modern, AR + LATIN
     Body    : IBM Plex Sans Arabic — bilingual, neutral, excellent Arabic
     Utility : IBM Plex Mono      — route codes, distances, fares, eyebrows
     All three are Google Fonts → self-host in the theme (/assets/fonts).
     ---------------------------------------------------------------------- */
  --af-font-display: "Zain", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --af-font-body:    "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  --af-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --af-font-arabic:  "IBM Plex Sans Arabic", "Zain", sans-serif;

  --af-fw-regular: 400;
  --af-fw-medium:  500;
  --af-fw-semibold:600;
  --af-fw-bold:    700;
  --af-fw-black:   800;

  /* Fluid type scale (min = 360px viewport, max = 1440px viewport) */
  --af-fs-display: clamp(2.75rem, 1.45rem + 5.8vw, 5.25rem);   /* 44 → 84 */
  --af-fs-h1:      clamp(2.25rem, 1.45rem + 3.6vw, 3.75rem);   /* 36 → 60 */
  --af-fs-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);   /* 28 → 44 */
  --af-fs-h3:      clamp(1.375rem, 1.13rem + 1.1vw, 1.875rem); /* 22 → 30 */
  --af-fs-h4:      clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);/* 18 → 22 */
  --af-fs-h5:      clamp(1rem, 0.94rem + 0.25vw, 1.125rem);    /* 16 → 18 */
  --af-fs-h6:      clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);/* 14 → 15 */
  --af-fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);    /* 17 → 20 */
  --af-fs-body:    1rem;
  --af-fs-sm:      0.9375rem;
  --af-fs-xs:      0.8125rem;
  --af-fs-eyebrow: 0.75rem;

  --af-lh-tight:   1.05;
  --af-lh-snug:    1.18;
  --af-lh-heading: 1.25;
  --af-lh-body:    1.65;
  --af-lh-relaxed: 1.8;
  --af-lh-arabic:  1.95;   /* Arabic needs more leading */

  --af-ls-display: -0.02em;
  --af-ls-heading: -0.01em;
  --af-ls-body:    0em;
  --af-ls-eyebrow: 0.18em;
  --af-ls-button:  0.02em;

  /* ----------------------------------------------------------------------
     5. SPACING — 4px base
     ---------------------------------------------------------------------- */
  --af-space-0:  0;
  --af-space-1:  0.25rem;   /* 4  */
  --af-space-2:  0.5rem;    /* 8  */
  --af-space-3:  0.75rem;   /* 12 */
  --af-space-4:  1rem;      /* 16 */
  --af-space-5:  1.25rem;   /* 20 */
  --af-space-6:  1.5rem;    /* 24 */
  --af-space-8:  2rem;      /* 32 */
  --af-space-10: 2.5rem;    /* 40 */
  --af-space-12: 3rem;      /* 48 */
  --af-space-16: 4rem;      /* 64 */
  --af-space-20: 5rem;      /* 80 */
  --af-space-24: 6rem;      /* 96 */
  --af-space-32: 8rem;      /* 128 */

  /* Rhythm */
  --af-section-y:      clamp(3.5rem, 3rem + 2vw, 5rem);     /* 56 → 80  */
  --af-section-y-tight:clamp(2.5rem, 2.15rem + 1.4vw, 3.5rem); /* 40 → 56 */
  --af-block-gap:      clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --af-heading-gap:    var(--af-space-4);

  /* ----------------------------------------------------------------------
     6. LAYOUT — aligned to Bootstrap 5.3 defaults
     ---------------------------------------------------------------------- */
  --af-bp-sm:  576px;
  --af-bp-md:  768px;
  --af-bp-lg:  992px;
  --af-bp-xl:  1200px;
  --af-bp-xxl: 1400px;

  --af-container-sm:  540px;
  --af-container-md:  720px;
  --af-container-lg:  960px;
  --af-container-xl:  1140px;
  --af-container-xxl: 1320px;
  --af-container-wide:1560px;  /* full-bleed media bands only */
  --af-container-prose: 68ch;  /* blog / long-form measure */

  --af-gutter:  1.5rem;   /* 24px — Bootstrap default */
  --af-gutter-sm: 1rem;
  --af-page-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ----------------------------------------------------------------------
     7. RADIUS / BORDER / SHADOW
     Architectural, not bubbly — small radii, hairline borders.
     ---------------------------------------------------------------------- */
  --af-radius-xs:  2px;
  --af-radius-sm:  4px;
  --af-radius-md:  6px;   /* buttons, inputs */
  --af-radius-lg:  12px;  /* cards, media */
  --af-radius-xl:  20px;  /* hero panels */
  --af-radius-pill:999px; /* tags, badges only */

  --af-border-width: 1px;
  --af-border-width-thick: 2px;
  --af-rule-gold: 2px;    /* the gold underline device */

  --af-shadow-xs: 0 1px 2px rgba(12, 12, 12, 0.05);
  --af-shadow-sm: 0 2px 8px rgba(12, 12, 12, 0.06);
  --af-shadow-md: 0 8px 24px rgba(12, 12, 12, 0.08);
  --af-shadow-lg: 0 20px 48px rgba(12, 12, 12, 0.12);
  --af-shadow-gold: 0 10px 30px rgba(168, 124, 44, 0.22);
  --af-shadow-inset-hairline: inset 0 -1px 0 rgba(12, 12, 12, 0.06);

  /* ----------------------------------------------------------------------
     8. MOTION
     ---------------------------------------------------------------------- */
  --af-dur-fast:   150ms;
  --af-dur-base:   250ms;
  --af-dur-slow:   420ms;
  --af-dur-reveal: 700ms;
  --af-ease:       cubic-bezier(0.22, 1, 0.36, 1);   /* dawn ease-out */
  --af-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

  /* ----------------------------------------------------------------------
     9. COMPONENT TOKENS
     ---------------------------------------------------------------------- */
  --af-header-h:        84px;
  --af-header-h-sticky: 68px;
  --af-header-bg:       rgba(255, 255, 255, 0.86);
  --af-header-bg-dark:  rgba(12, 12, 12, 0.82);
  --af-header-blur:     saturate(180%) blur(14px);

  --af-btn-h:        52px;
  --af-btn-h-sm:     42px;
  --af-btn-h-lg:     60px;
  --af-btn-px:       var(--af-space-6);
  --af-btn-fs:       0.9375rem;
  --af-btn-fw:       var(--af-fw-semibold);

  --af-input-h:      54px;
  --af-input-bg:     #FFFFFF;
  --af-input-border: var(--af-ink-200);
  --af-input-radius: var(--af-radius-md);

  --af-card-pad:     clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --af-card-radius:  var(--af-radius-lg);
  --af-card-border:  var(--af-border);

  --af-icon-sm: 20px;
  --af-icon-md: 24px;
  --af-icon-lg: 32px;

  /* ---------------------------------------------------------------------
     10. Z-INDEX
     --------------------------------------------------------------------- */
  --af-z-base:     1;
  --af-z-sticky:   1020;
  --af-z-header:   1030;
  --af-z-drawer:   1045;
  --af-z-modal:    1055;
  --af-z-toast:    1080;
  --af-z-floating: 1090;  /* WhatsApp / call FAB */
}

/* ==========================================================================
   INK SECTIONS — flip semantics instead of writing override rules
   Apply .af-theme-ink to any <section> that sits on black.
   ========================================================================== */
.af-theme-ink {
  --af-bg:            var(--af-ink-900);
  --af-bg-subtle:     var(--af-ink-800);
  --af-surface:       var(--af-ink-800);
  --af-text:          #FFFFFF;
  --af-text-muted:    rgba(255, 255, 255, 0.68);
  --af-text-subtle:   rgba(255, 255, 255, 0.48);
  --af-text-gold:     var(--af-gold-500);
  --af-border:        rgba(255, 255, 255, 0.12);
  --af-border-strong: rgba(255, 255, 255, 0.22);
  --af-card-border:   rgba(255, 255, 255, 0.12);
  --af-input-bg:      rgba(255, 255, 255, 0.06);
  --af-input-border:  rgba(255, 255, 255, 0.18);

  background-color: var(--af-bg);
  color: var(--af-text);
}

/* ==========================================================================
   RTL — Arabic version of the site
   Use logical properties everywhere; these are the only direction tokens.
   ========================================================================== */
[dir="rtl"] {
  --af-lh-body: var(--af-lh-arabic);
  --af-ls-heading: 0em;
  --af-ls-display: 0em;
  --af-ls-eyebrow: 0.06em; /* Arabic must not be letterspaced hard */
}
[dir="rtl"] body { font-family: var(--af-font-arabic); }

/* ==========================================================================
   BASE PRIMITIVES
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--af-bg);
  color: var(--af-text);
  font-family: var(--af-font-body);
  font-size: var(--af-fs-body);
  line-height: var(--af-lh-body);
  font-weight: var(--af-fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .af-display {
  font-family: var(--af-font-display);
  font-weight: var(--af-fw-bold);
  line-height: var(--af-lh-heading);
  letter-spacing: var(--af-ls-heading);
  color: var(--af-text);
  margin-block: 0 var(--af-heading-gap);
  text-wrap: balance;
}

.af-display { font-size: var(--af-fs-display); line-height: var(--af-lh-tight); letter-spacing: var(--af-ls-display); }
h1 { font-size: var(--af-fs-h1); line-height: var(--af-lh-snug); }
h2 { font-size: var(--af-fs-h2); }
h3 { font-size: var(--af-fs-h3); }
h4, h5, h6 { font-family: var(--af-font-body); font-weight: var(--af-fw-semibold); }
h4 { font-size: var(--af-fs-h4); }
h5 { font-size: var(--af-fs-h5); }
h6 { font-size: var(--af-fs-h6); }

p { margin-block: 0 var(--af-space-4); max-width: 68ch; }
.af-lead { font-size: var(--af-fs-lead); color: var(--af-text-muted); line-height: var(--af-lh-relaxed); }

/* Eyebrow / dispatch label — the utility voice of the brand */
.af-eyebrow {
  font-family: var(--af-font-mono);
  font-size: var(--af-fs-eyebrow);
  font-weight: var(--af-fw-medium);
  letter-spacing: var(--af-ls-eyebrow);
  text-transform: uppercase;
  color: var(--af-text-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--af-space-2);
}
.af-eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: var(--af-rule-gold);
  background: var(--af-grad-gold);
}

/* Data figure — distances, fares, seat counts */
.af-figure {
  font-family: var(--af-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--af-fw-medium);
}

a { color: var(--af-text-gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--af-accent-press); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--af-focus-ring);
  outline-offset: 3px;
  border-radius: var(--af-radius-xs);
}

section { padding-block: var(--af-section-y); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}