/* ==========================================================================
   Al Huwais Design System — Tokens v2 (Light + High-Contrast)
   Single source of truth for colors, spacing, typography, motion.
   Load this BEFORE any other component CSS.
   ========================================================================== */

:root {
    /* Brand --------------------------------------------------------------- */
    /* Heritage palette: navy #002D62 + gold #D2AB2D — modernised. */
    --ah-brand-primary: #0066CC;          /* vibrant industrial blue (CTA / accent) */
    --ah-brand-primary-hover: #0052A3;
    --ah-brand-primary-soft: #E6F0FA;     /* tinted bg for highlights */

    --ah-brand-deep: #002D62;             /* heritage navy — reserve for hero / footer only */
    --ah-brand-deep-hover: #00214A;

    --ah-brand-gold: #D2AB2D;             /* heritage gold — accents, avatar borders */
    --ah-brand-gold-soft: #FBF3D8;

    --ah-brand-steel: #475569;
    --ah-brand-accent: #F59E0B;           /* amber — for "featured" pills */

    /* Surfaces (light by default) ----------------------------------------- */
    --ah-surface-0: #FFFFFF;
    --ah-surface-1: #F7F9FC;              /* page background */
    --ah-surface-2: #EEF2F8;
    --ah-surface-3: #E2E8F0;
    --ah-surface-dark: #0F172A;           /* used only intentionally */
    --ah-surface-dark-2: #1E293B;

    /* Ink (text) — verified contrast ------------------------------------- */
    --ah-ink-1: #0F172A;                  /* 16:1 on white */
    --ah-ink-2: #334155;                  /* 9:1 on white */
    --ah-ink-3: #64748B;                  /* 5:1 on white — minimum readable */
    --ah-ink-inverse: #FFFFFF;
    --ah-ink-on-deep: #FFFFFF;
    --ah-ink-on-deep-muted: rgba(255,255,255,0.82);

    /* Semantic ------------------------------------------------------------ */
    --ah-success: #16A34A;
    --ah-warning: #F59E0B;
    --ah-danger:  #DC2626;
    --ah-info:    #0284C7;

    /* Borders ------------------------------------------------------------- */
    --ah-border-1: #E2E8F0;
    --ah-border-2: #CBD5E1;
    --ah-border-strong: #94A3B8;

    /* Spacing — 4px scale ------------------------------------------------- */
    --ah-s-1: 4px;   --ah-s-2: 8px;   --ah-s-3: 12px;  --ah-s-4: 16px;
    --ah-s-5: 24px;  --ah-s-6: 32px;  --ah-s-7: 48px;  --ah-s-8: 64px;
    --ah-s-9: 96px;  --ah-s-10: 128px;

    /* Typography ---------------------------------------------------------- */
    --ah-font-ar: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
    --ah-font-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ah-font-mono: "JetBrains Mono", "Fira Code", monospace;

    --ah-fs-xs:  13px;
    --ah-fs-sm:  15px;
    --ah-fs-md:  17px;
    --ah-fs-lg:  20px;
    --ah-fs-xl:  26px;
    --ah-fs-2xl: 34px;
    --ah-fs-3xl: 46px;
    --ah-fs-4xl: 60px;

    --ah-lh-tight:   1.2;
    --ah-lh-snug:    1.4;
    --ah-lh-normal:  1.6;
    --ah-lh-relaxed: 1.8;

    --ah-fw-regular:  400;
    --ah-fw-medium:   500;
    --ah-fw-semibold: 600;
    --ah-fw-bold:     700;
    --ah-fw-black:    900;

    /* Radius -------------------------------------------------------------- */
    --ah-r-xs:   4px;
    --ah-r-sm:   8px;
    --ah-r-md:   14px;
    --ah-r-lg:   22px;
    --ah-r-xl:   32px;
    --ah-r-full: 9999px;

    /* Elevation ----------------------------------------------------------- */
    --ah-shadow-0: none;
    --ah-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --ah-shadow-2: 0 4px 12px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
    --ah-shadow-3: 0 12px 32px rgba(0, 45, 98, .12), 0 24px 64px rgba(0, 45, 98, .10);
    --ah-shadow-glow: 0 0 0 4px rgba(0, 102, 204, .15);
    --ah-shadow-focus: 0 0 0 3px rgba(0, 102, 204, .35);

    /* Gradients ----------------------------------------------------------- */
    --ah-gradient-hero: linear-gradient(135deg, #002D62 0%, #003E84 45%, #0066CC 100%);
    --ah-gradient-light: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
    --ah-gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
    --ah-gradient-gold: linear-gradient(135deg, #F5C24A 0%, #D2AB2D 100%);

    /* Motion -------------------------------------------------------------- */
    --ah-ease:     cubic-bezier(.2, .8, .2, 1);
    --ah-ease-out: cubic-bezier(0, 0, .2, 1);
    --ah-ease-in:  cubic-bezier(.4, 0, 1, 1);
    --ah-d-fast: 150ms;
    --ah-d-base: 250ms;
    --ah-d-slow: 450ms;
    --ah-d-deliberate: 700ms;

    /* Layout -------------------------------------------------------------- */
    --ah-container: 1280px;
    --ah-container-tight: 960px;
    --ah-section-y: clamp(28px, 4vw, 56px);
}

/* Language-aware default font */
html[lang^="ar"] body,
[dir="rtl"] body {
    font-family: var(--ah-font-ar);
}
html[lang^="en"] body,
[dir="ltr"] body {
    font-family: var(--ah-font-en);
}

/* Default page background — every page gets the light surface unless
   a specific component (.ah-hero) overrides it. */
body.ah-themed {
    background-color: var(--ah-surface-1);
    color: var(--ah-ink-1);
}