/* ============================================================
   AELAANY DESIGN SYSTEM — TOKENS v1
   Companion to: 03-design-system.md
   Generated:    2026-05-19
   Owner:        UI Designer agent
   Compatible:   drop-in replacement for global.css lines 10-83
                 (backward-compat aliases at bottom keep old API alive)
   Notes:        hex shipped for compatibility; OKLCH values
                 documented in the .md file. Brand blue locked
                 to #1B4FD8 per Brand Guardian.
   ============================================================ */

:root {
  /* ────────────────────────────────────────────────────────────
     1. BRAND BLUE SCALE  (anchor: --blue-600 = #1B4FD8 — LOCKED)
     ──────────────────────────────────────────────────────────── */
  --blue-50:  #EFF4FF;
  --blue-100: #DCE6FF;
  --blue-200: #B8CDFF;
  --blue-300: #8AAEFF;
  --blue-400: #5C8AFF;
  --blue-500: #3669EF;
  --blue-600: #1B4FD8;   /* PRIMARY — locked */
  --blue-700: #1540B8;   /* hover/pressed */
  --blue-800: #1E3A8A;   /* deep — locked */
  --blue-900: #172E6E;
  --blue-950: #0F1E4A;   /* footer bg — locked */

  /* Sky accent (locked secondary) */
  --sky-400:  #38BDF8;
  --sky-500:  #0EA5E9;   /* locked — decorative only on light */
  --sky-600:  #0284C7;   /* AA-safe on white */
  --sky-700:  #0369A1;

  /* ────────────────────────────────────────────────────────────
     2. NEUTRAL SCALE  (cool-tinted, 2-3% blue chroma)
     ──────────────────────────────────────────────────────────── */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FAFBFD;
  --neutral-50:   #F5F7FB;
  --neutral-100:  #EEF1F7;
  --neutral-150:  #E4E9F2;
  --neutral-200:  #D6DCE8;
  --neutral-300:  #BFC7D6;
  --neutral-400:  #97A1B3;
  --neutral-500:  #6B7587;
  --neutral-600:  #4D5666;
  --neutral-700:  #363E4C;
  --neutral-800:  #252B36;
  --neutral-900:  #161A22;
  --neutral-950:  #0F131A;
  --neutral-1000: #0A0F1F;

  /* ────────────────────────────────────────────────────────────
     3. ACCENT — GOLD  (locked: focus ring + ratings)
     ──────────────────────────────────────────────────────────── */
  --gold-400: #FCD34D;
  --gold-500: #FBBF24;   /* locked — focus ring + star fill */
  --gold-600: #D97706;   /* AA-safe gold text */

  /* ────────────────────────────────────────────────────────────
     4. SEMANTIC COLORS
     ──────────────────────────────────────────────────────────── */
  --color-success:     #10B981;
  --color-success-fg:  #047857;
  --color-success-bg:  #ECFDF5;
  --color-warning:     #F59E0B;
  --color-warning-fg:  #B45309;
  --color-warning-bg:  #FFFBEB;
  --color-danger:      #EF4444;
  --color-danger-fg:   #DC2626;
  --color-danger-bg:   #FEF2F2;
  --color-info:        #0EA5E9;
  --color-info-fg:     #0284C7;
  --color-info-bg:     #F0F9FF;
  --color-focus-ring:  #FBBF24;

  /* Channel-branded colors (used in CTAs/icons) */
  --color-whatsapp:    #25D366;
  --color-instagram:   #E1306C;
  --color-facebook:    #1877F2;
  --color-tiktok:      #000000;
  --color-youtube:     #FF0000;
  --color-linkedin:    #0A66C2;

  /* ────────────────────────────────────────────────────────────
     5. SEMANTIC TOKENS  (the layer to consume — keeps colors swappable)
     ──────────────────────────────────────────────────────────── */
  /* Surfaces */
  --surface-base:       var(--neutral-0);
  --surface-raised:     var(--neutral-0);
  --surface-sunken:     var(--neutral-50);
  --surface-alt:        var(--blue-50);
  --surface-inverse:    var(--blue-950);
  --surface-brand:      var(--blue-600);
  --surface-brand-soft: var(--blue-100);

  /* Text */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-700);
  --text-muted:      var(--neutral-500);
  --text-placeholder:var(--neutral-400);
  --text-inverse:    var(--neutral-0);
  --text-on-brand:   var(--neutral-0);
  --text-link:       var(--blue-600);
  --text-link-hover: var(--blue-700);
  --text-accent:     var(--sky-700);  /* AA-safe sky for eyebrows on light */

  /* Borders */
  --border-subtle:      var(--neutral-100);
  --border-default:     var(--neutral-150);
  --border-strong:      var(--neutral-300);
  --border-brand:       var(--blue-600);
  --border-brand-soft:  var(--blue-200);
  --border-focus:       var(--gold-500);

  /* ────────────────────────────────────────────────────────────
     6. GRADIENTS  (locked from brand)
     ──────────────────────────────────────────────────────────── */
  --gradient-main: linear-gradient(135deg, #1B4FD8 0%, #0EA5E9 100%);
  --gradient-dark: linear-gradient(135deg, #1E3A8A 0%, #1B4FD8 100%);
  --gradient-hero: linear-gradient(135deg, #0f2460 0%, #1B4FD8 50%, #0EA5E9 100%);
  --gradient-divider: linear-gradient(90deg, var(--blue-600) 0%, var(--sky-500) 100%);
  --gradient-text: var(--gradient-main); /* alias for text-gradient utility */

  /* ────────────────────────────────────────────────────────────
     7. TYPOGRAPHY — STACKS
     ──────────────────────────────────────────────────────────── */
  --font-display:    'Poppins', 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:       'Inter', 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:       ui-monospace, 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
  --font-ar-display: 'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-ar-body:    'Tajawal', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ────────────────────────────────────────────────────────────
     8. TYPOGRAPHY — SCALE (clamp for fluid scaling)
     ──────────────────────────────────────────────────────────── */
  --fs-display:  clamp(2.5rem, 6vw, 4.5rem);     /* 40 → 72 */
  --fs-h1:       clamp(2rem, 4.5vw, 3.25rem);    /* 32 → 52 */
  --fs-h2:       clamp(1.625rem, 3vw, 2.25rem);  /* 26 → 36 */
  --fs-h3:       clamp(1.25rem, 2vw, 1.5rem);    /* 20 → 24 */
  --fs-h4:       clamp(1.125rem, 1.5vw, 1.25rem);/* 18 → 20 */
  --fs-h5:       clamp(1.0625rem, 1.3vw, 1.125rem); /* 17 → 18 */
  --fs-h6:       clamp(0.9375rem, 1vw, 1rem);    /* 15 → 16 */
  --fs-body-lg:  clamp(1.0625rem, 1.2vw, 1.1875rem); /* 17 → 19 */
  --fs-body:     1rem;        /* 16 */
  --fs-body-sm:  0.9375rem;   /* 15 */
  --fs-caption:  0.8125rem;   /* 13 */
  --fs-eyebrow:  clamp(0.75rem, 0.9vw, 0.8125rem);   /* 12 → 13 */
  --fs-code:     0.875rem;    /* 14 */

  /* Line heights */
  --lh-tight:   1.10;
  --lh-snug:    1.25;
  --lh-normal:  1.50;
  --lh-relaxed: 1.65;
  --lh-loose:   1.70;

  /* Heading line heights (EN defaults — AR adds +0.10 via lang rule below) */
  --lh-display: 1.05;
  --lh-h1:      1.10;
  --lh-h2:      1.15;
  --lh-h3:      1.25;
  --lh-h4:      1.30;
  --lh-h5:      1.40;
  --lh-h6:      1.45;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Tracking */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.015em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ────────────────────────────────────────────────────────────
     9. SPACING SCALE (4px base)
     ──────────────────────────────────────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* Section padding rhythm */
  --section-py-sm: var(--space-12);  /* 48 mobile */
  --section-py:    var(--space-20);  /* 80 default */
  --section-py-lg: var(--space-24);  /* 96 hero zones */
  --section-header-mb: var(--space-14); /* 56 below section header */

  /* Stack/row gap presets */
  --stack-gap-tight:  var(--space-3);
  --stack-gap:        var(--space-6);
  --stack-gap-loose:  var(--space-10);
  --row-gap-tight:    var(--space-2);
  --row-gap:          var(--space-4);
  --row-gap-loose:    var(--space-6);
  --gap-card:         var(--space-6);

  /* ────────────────────────────────────────────────────────────
     10. CONTAINER WIDTHS
     ──────────────────────────────────────────────────────────── */
  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1200px;   /* default */
  --container-wide:  1320px;   /* ≥1440 viewports */
  --container-pad:   clamp(16px, 4vw, 32px);

  /* Breakpoint reference (CSS doesn't use vars in MQ — these are docs) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ────────────────────────────────────────────────────────────
     11. RADII
     ──────────────────────────────────────────────────────────── */
  --radius-none:   0;
  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     8px;     /* default button + form control */
  --radius-lg:     12px;    /* default card */
  --radius-xl:     16px;    /* hero card / service tile */
  --radius-2xl:    20px;
  --radius-3xl:    24px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ────────────────────────────────────────────────────────────
     12. SHADOWS / ELEVATION  (blue-tinted, directional)
     ──────────────────────────────────────────────────────────── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 rgba(15, 30, 74, 0.06);
  --elevation-2: 0 4px 12px -2px rgba(15, 30, 74, 0.08), 0 2px 4px -2px rgba(15, 30, 74, 0.05);
  --elevation-3: 0 12px 24px -6px rgba(27, 79, 216, 0.12), 0 4px 8px -4px rgba(27, 79, 216, 0.06);
  --elevation-4: 0 24px 48px -12px rgba(27, 79, 216, 0.18), 0 8px 16px -8px rgba(27, 79, 216, 0.08);
  --elevation-5: 0 32px 64px -16px rgba(15, 30, 74, 0.24), 0 12px 24px -12px rgba(15, 30, 74, 0.12);

  --shadow-brand-btn:       0 4px 12px -2px rgba(27, 79, 216, 0.32);
  --shadow-brand-btn-hover: 0 8px 20px -4px rgba(27, 79, 216, 0.42);
  --shadow-header:          0 2px 12px -2px rgba(15, 30, 74, 0.08);
  --shadow-focus-ring:      0 0 0 5px rgba(251, 191, 36, 0.25);

  /* ────────────────────────────────────────────────────────────
     13. MOTION
     ──────────────────────────────────────────────────────────── */
  --dur-instant: 0ms;
  --dur-fast:    120ms;
  --dur-normal:  240ms;
  --dur-slow:    400ms;
  --dur-slower:  700ms;

  --ease-linear:  linear;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-color: color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out);
  --transition-lift:  transform var(--dur-normal) var(--ease-spring),
                      box-shadow var(--dur-normal) var(--ease-out);
  --transition-base:  transform var(--dur-normal) var(--ease-out),
                      opacity var(--dur-normal) var(--ease-out),
                      box-shadow var(--dur-normal) var(--ease-out),
                      color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out);

  /* ────────────────────────────────────────────────────────────
     14. ICON SIZE SCALE
     ──────────────────────────────────────────────────────────── */
  --icon-xs:  16px;
  --icon-sm:  20px;
  --icon-md:  24px;   /* default */
  --icon-lg:  32px;
  --icon-xl:  48px;
  --icon-2xl: 60px;

  /* ────────────────────────────────────────────────────────────
     15. LAYOUT
     ──────────────────────────────────────────────────────────── */
  --header-height: 80px;
  --header-height-scrolled: 64px;

  /* ────────────────────────────────────────────────────────────
     16. Z-INDEX SCALE
     ──────────────────────────────────────────────────────────── */
  --z-base:        0;
  --z-raised:      10;
  --z-dropdown:    1000;
  --z-sticky:      1020;
  --z-fixed:       1030;
  --z-overlay:     1040;
  --z-modal:       1050;
  --z-popover:     1060;
  --z-tooltip:     1070;
  --z-toast:       1080;
  --z-back-to-top: 9988;
  --z-whatsapp:    9989;
  --z-skip-link:   100000;
}

/* ────────────────────────────────────────────────────────────
   17. DARK MODE  (opt-in; off by default for v1)
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-base:       var(--neutral-1000);
  --surface-raised:     var(--neutral-950);
  --surface-sunken:     #060912;
  --surface-alt:        #0F1832;
  --surface-inverse:    var(--neutral-0);

  --text-primary:       #E8ECF5;
  --text-secondary:     #B8C0CF;
  --text-muted:         #828B9F;
  --text-placeholder:   #5E677A;
  --text-inverse:       var(--neutral-900);
  --text-link:          var(--blue-400);
  --text-link-hover:    var(--blue-300);
  --text-accent:        var(--sky-400);

  --border-subtle:      #1A2030;
  --border-default:     #232B3D;
  --border-strong:      #354056;
  --border-brand-soft:  #1B2E5F;

  /* Elevations get heavier shadows on dark */
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --elevation-2: 0 4px 12px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --elevation-3: 0 12px 24px -6px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.35);
  --elevation-4: 0 24px 48px -12px rgba(0, 0, 0, 0.60), 0 8px 16px -8px rgba(0, 0, 0, 0.40);
  --elevation-5: 0 32px 64px -16px rgba(0, 0, 0, 0.70), 0 12px 24px -12px rgba(0, 0, 0, 0.50);

  --shadow-header: 0 2px 12px -2px rgba(0, 0, 0, 0.50);
}

/* ────────────────────────────────────────────────────────────
   18. RTL / AR-LANG ADJUSTMENTS
   Prefer logical properties everywhere — these are the few
   token-level adjustments needed when direction or language flips.
   ──────────────────────────────────────────────────────────── */
[dir="rtl"],
body.lang-ar {
  /* AR heading line-heights — Tajawal needs more vertical room */
  --lh-display: 1.15;
  --lh-h1:      1.20;
  --lh-h2:      1.25;
  --lh-h3:      1.35;
  --lh-h4:      1.40;
  --lh-h5:      1.50;
  --lh-h6:      1.55;

  /* AR never uses negative tracking */
  --tracking-tighter: 0;
  --tracking-tight:   0;
  --tracking-snug:    0;

  /* AR headings carry more weight to match optical density */
  --fw-bold:      800;
  --fw-extrabold: 900;
}

/* ────────────────────────────────────────────────────────────
   19. REDUCED MOTION  (system-wide)
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
    --dur-slower:  0ms;
  }
}

/* ════════════════════════════════════════════════════════════
   20. BACKWARD-COMPATIBILITY ALIASES
   Every legacy token from global.css lines 10-83 maps here so
   existing rules keep working unchanged. Frontend Dev can
   refactor consumers to new names incrementally.
   ════════════════════════════════════════════════════════════ */
:root {
  /* Brand colors */
  --clr-primary:       var(--blue-600);
  --clr-primary-light: var(--sky-500);
  --clr-primary-dark:  var(--blue-800);
  --clr-primary-hover: var(--blue-700);

  /* Neutrals */
  --clr-white:       var(--neutral-0);
  --clr-bg-light:    var(--blue-50);
  --clr-bg-section:  var(--neutral-50);
  --clr-text-dark:   var(--neutral-900);
  --clr-text-body:   var(--neutral-700);
  --clr-text-muted:  var(--neutral-500);
  --clr-border:      var(--blue-100);
  --clr-card-border: var(--blue-200);

  /* Typography legacy names */
  --font-en-heading: var(--font-display);
  --font-en-body:    var(--font-body);
  --font-ar-heading: var(--font-ar-display);
  --font-ar-body:    var(--font-ar-body);

  /* Legacy fs token — --fs-hero was the old name for display */
  --fs-hero:  var(--fs-display);
  --fs-small: var(--fs-body-sm);
  --fs-xs:    var(--fs-caption);

  /* Spacing legacy */
  --section-py-mobile: var(--section-py-sm);
  --container-max:     var(--container-xl);

  /* Radii legacy */
  --radius-card: var(--radius-lg);
  --radius-btn:  var(--radius-md);

  /* Shadows legacy */
  --shadow-card:  var(--elevation-2);
  --shadow-hover: var(--elevation-3);
  --shadow-btn:   var(--shadow-brand-btn);

  /* Transitions legacy */
  --transition:      var(--transition-base);
  --transition-fast: var(--transition-color);

  /* Misc legacy structural */
  --clr-hero-deep:  #0f2460;          /* close to --blue-950, kept exact for gradient stability */
  --clr-footer-bg:  var(--blue-950);
  --clr-whatsapp:   var(--color-whatsapp);
  --clr-star:       var(--gold-500);
}

/* Wide-screen container override (matches existing global.css:434) */
@media (min-width: 1440px) {
  :root {
    --container-max: var(--container-wide);
  }
}

/* ────────────────────────────────────────────────────────────
   END OF TOKENS — All component CSS belongs in component files,
   not here. This file is tokens-only.
   ──────────────────────────────────────────────────────────── */