/* =====================================================================
   AWTAAD Digital Identity System — Foundations
   Colors · Type · Spacing · Radius · Elevation · Motion · Layout
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONTS
   English: Inter (variable)         — workhorse, technical, neutral
   Arabic:  IBM Plex Sans Arabic     — paired with Inter, premium tech
   Mono:    JetBrains Mono           — code, IP addresses, configs, IDs
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* IBM Plex Sans Arabic — locally bundled (all 7 weights) ————————————————
   Replaces the Google Fonts substitute. Files live in fonts/.              */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("./fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* JetBrains Mono — locally bundled via variable fonts (full weight axis) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   COLOR — Primitive scale
   The brand mark is a strong ultramarine. The system extends it into a
   technical, enterprise palette: deep navy "fortress" surfaces, a clean
   neutral slate ramp, and minimal signal accents. NO gradients in body
   surfaces; reserved for hero treatments only.
   --------------------------------------------------------------------- */
:root {
  /* ── Brand: AWTAAD Blue (ultramarine) ─────────────────────────────── */
  --awtaad-50:  #EEF1FB;
  --awtaad-100: #DCE2F7;
  --awtaad-200: #B5C0EE;
  --awtaad-300: #8395E0;
  --awtaad-400: #4F69D0;
  --awtaad-500: #2040B0;   /* CORE — matches the logo mark */
  --awtaad-600: #1B36A0;
  --awtaad-700: #152B85;
  --awtaad-800: #102166;
  --awtaad-900: #0B1745;

  /* ── Navy / Ink (the wordmark colour, used for text + dark surfaces) */
  --ink-50:  #F5F6FA;
  --ink-100: #E6E9F1;
  --ink-200: #C8CEDC;
  --ink-300: #98A2B8;
  --ink-400: #5E6A85;
  --ink-500: #3A455E;
  --ink-600: #232F47;
  --ink-700: #182236;
  --ink-800: #111729;   /* primary body text on light */
  --ink-900: #0B1226;
  --ink-950: #060A18;   /* darkest enterprise surface */

  /* ── Neutral / Slate ──────────────────────────────────────────────── */
  --slate-0:   #FFFFFF;
  --slate-25:  #FBFCFD;
  --slate-50:  #F6F8FB;
  --slate-100: #EEF1F6;
  --slate-200: #E2E6EE;
  --slate-300: #C9D0DC;
  --slate-400: #97A0B2;
  --slate-500: #6B7488;
  --slate-600: #4B5468;
  --slate-700: #343C4F;
  --slate-800: #1F2638;

  /* ── Accent: Signal Cyan (telemetry / live / data points) ─────────── */
  --signal-50:  #E7FAFD;
  --signal-100: #C4F1F8;
  --signal-300: #6FDDEE;
  --signal-500: #28C7E8;   /* used sparingly — never as background */
  --signal-700: #0E8FAA;

  /* ── Accent: Sand (Saudi warmth, optional premium accent) ─────────── */
  --sand-100: #F6EBD3;
  --sand-300: #E6CFA1;
  --sand-500: #C9A765;   /* gilded — only on dark surfaces, sparingly */
  --sand-700: #8C7234;

  /* ── Semantic ─────────────────────────────────────────────────────── */
  --success-100: #D6F1E2;
  --success-500: #2EB67D;
  --success-700: #126B47;

  --warning-100: #FCEACB;
  --warning-500: #E69919;
  --warning-700: #8A5A05;

  --critical-100: #FBD9DB;
  --critical-500: #E0454C;
  --critical-700: #8E1F25;

  --info-100: #DCE2F7;   /* aliases to brand */
  --info-500: #2040B0;

  /* ── Semantic surface / text tokens (light mode) ──────────────────── */
  --bg:           var(--slate-25);
  --bg-subtle:    var(--slate-50);
  --bg-muted:     var(--slate-100);
  --surface:      var(--slate-0);
  --surface-raised: var(--slate-0);
  --surface-inverse: var(--ink-950);

  --border:       var(--slate-200);
  --border-strong:var(--slate-300);
  --divider:      var(--slate-100);

  --fg:           var(--ink-800);   /* primary body */
  --fg-strong:    var(--ink-900);   /* H1/H2/display */
  --fg-muted:     var(--slate-600); /* secondary body */
  --fg-subtle:    var(--slate-500); /* meta, captions, helper */
  --fg-disabled:  var(--slate-400);
  --fg-inverse:   var(--slate-0);

  --link:         var(--awtaad-600);
  --link-hover:   var(--awtaad-700);
  --focus-ring:   var(--awtaad-500);

  /* ── Dark mode (enterprise / "ops" / dashboards) ─────────────────── */
  --dark-bg:           var(--ink-950);
  --dark-bg-subtle:    var(--ink-900);
  --dark-surface:      #0E1531;        /* slightly raised vs --ink-950 */
  --dark-surface-raised:#161E3D;
  --dark-border:       #1E274A;
  --dark-border-strong:#2A3563;
  --dark-fg:           #E7EAF3;
  --dark-fg-muted:     #A3ABC4;
  --dark-fg-subtle:    #6B7799;

  /* ─────────────────────────────────────────────────────────────────
     TYPE
     Display & body: Inter   |   Arabic: "IBM Plex Sans Arabic"
     Mono: JetBrains Mono    |   No script / no serif by default
     ───────────────────────────────────────────────────────────────── */
  --font-sans:    "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system,
                  "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic:  "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono",
                  "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, slightly compressed; built for B2B density.
     All sizes in px so unit conversions stay obvious. */
  --t-display-xl: 72px; /* hero, rare */
  --t-display:    56px; /* page hero */
  --t-h1:         40px;
  --t-h2:         32px;
  --t-h3:         24px;
  --t-h4:         20px;
  --t-h5:         18px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    13px;
  --t-micro:      12px;
  --t-eyebrow:    12px; /* tracked-out small caps */

  /* Line-heights — tight for display, comfortable for body */
  --lh-display:   1.04;
  --lh-heading:   1.18;
  --lh-body:      1.55;
  --lh-tight:     1.3;

  /* Weights */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;

  /* Letter-spacing */
  --ls-display:   -0.02em;
  --ls-heading:   -0.012em;
  --ls-body:       0;
  --ls-eyebrow:    0.14em;   /* the "spaced-caps" look from the logo lockup */

  /* ─────────────────────────────────────────────────────────────────
     SPACING — 4px base. We use the half-step (2) and quarter (1) for
     fine optical adjustments; everything else is on the 4-grid.
     ───────────────────────────────────────────────────────────────── */
  --s-0:   0px;
  --s-1:   2px;
  --s-2:   4px;
  --s-3:   8px;
  --s-4:   12px;
  --s-5:   16px;
  --s-6:   20px;
  --s-7:   24px;
  --s-8:   32px;
  --s-9:   40px;
  --s-10:  48px;
  --s-11:  64px;
  --s-12:  80px;
  --s-13:  96px;
  --s-14:  128px;
  --s-15:  160px;

  /* ─────────────────────────────────────────────────────────────────
     RADIUS — restrained. Cards 8-12px, pills only for tags & buttons.
     The brand mark itself has soft-but-not-pillowy corners; we mirror.
     ───────────────────────────────────────────────────────────────── */
  --r-none: 0;
  --r-xs:   2px;   /* hairline rules, table cells */
  --r-sm:   4px;   /* inputs, micro chips */
  --r-md:   6px;   /* buttons */
  --r-lg:   10px;  /* cards (default) */
  --r-xl:   16px;  /* feature cards, modals */
  --r-2xl:  24px;  /* hero surfaces */
  --r-full: 999px; /* pills, avatars */

  /* ─────────────────────────────────────────────────────────────────
     ELEVATION — Soft, blue-tinted shadows. No black drop-shadows.
     ───────────────────────────────────────────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(17, 23, 41, 0.04),
            0 1px 2px rgba(17, 23, 41, 0.04);
  --elev-2: 0 1px 0 rgba(17, 23, 41, 0.04),
            0 6px 16px -6px rgba(17, 23, 41, 0.10);
  --elev-3: 0 2px 0 rgba(17, 23, 41, 0.03),
            0 14px 32px -10px rgba(17, 23, 41, 0.14);
  --elev-4: 0 24px 56px -16px rgba(11, 23, 69, 0.22);
  --ring-focus: 0 0 0 3px rgba(32, 64, 176, 0.28);
  --ring-focus-light: 0 0 0 3px rgba(32, 64, 176, 0.18);

  /* On-dark elevation uses lighter highlight + softer drop */
  --elev-dark-1: inset 0 1px 0 rgba(255,255,255,0.04),
                 0 1px 2px rgba(0,0,0,0.45);
  --elev-dark-2: inset 0 1px 0 rgba(255,255,255,0.05),
                 0 12px 28px -10px rgba(0,0,0,0.55);

  /* ─────────────────────────────────────────────────────────────────
     MOTION — Subtle. Enterprise tools earn trust by being still.
     ───────────────────────────────────────────────────────────────── */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emphasis: cubic-bezier(.16,.84,.24,1);

  /* ─────────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────────── */
  --container-sm:  720px;
  --container-md:  960px;
  --container-lg: 1140px;
  --container-xl: 1280px;
  --container-2xl:1440px;
  --gutter:        24px;
  --section-y:     112px; /* matches .aw-section padding-block in website UI kit */
}

/* ---------------------------------------------------------------------
   SEMANTIC TYPE CLASSES — apply with class, not raw tokens.
   --------------------------------------------------------------------- */
.eyebrow {
  font: var(--w-semibold) var(--t-eyebrow)/1.2 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--awtaad-600);
}
.display-xl {
  font: var(--w-semibold) var(--t-display-xl)/var(--lh-display) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}
.display {
  font: var(--w-semibold) var(--t-display)/var(--lh-display) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}
h1, .h1 {
  font: var(--w-semibold) var(--t-h1)/var(--lh-heading) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
  margin: 0;
}
h2, .h2 {
  font: var(--w-semibold) var(--t-h2)/var(--lh-heading) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
  margin: 0;
}
h3, .h3 {
  font: var(--w-semibold) var(--t-h3)/var(--lh-heading) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
  margin: 0;
}
h4, .h4 {
  font: var(--w-semibold) var(--t-h4)/var(--lh-tight) var(--font-display);
  color: var(--fg-strong);
  margin: 0;
}
h5, .h5 {
  font: var(--w-semibold) var(--t-h5)/var(--lh-tight) var(--font-sans);
  color: var(--fg-strong);
  margin: 0;
}
.body-lg {
  font: var(--w-regular) var(--t-body-lg)/var(--lh-body) var(--font-sans);
  color: var(--fg);
}
p, .body {
  font: var(--w-regular) var(--t-body)/var(--lh-body) var(--font-sans);
  color: var(--fg);
  margin: 0;
}
.body-sm {
  font: var(--w-regular) var(--t-body-sm)/var(--lh-body) var(--font-sans);
  color: var(--fg-muted);
}
.caption {
  font: var(--w-regular) var(--t-caption)/1.4 var(--font-sans);
  color: var(--fg-subtle);
}
.micro {
  font: var(--w-medium) var(--t-micro)/1.3 var(--font-sans);
  color: var(--fg-subtle);
}
code, .mono {
  font: var(--w-medium) 0.92em/1.5 var(--font-mono);
  background: var(--slate-100);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-800);
}
[lang="ar"], .ar {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
}

/* ---------------------------------------------------------------------
   FOCUS — always-visible, brand-coloured, never removed.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------------- */
.container       { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }
.container--lg   { max-width: var(--container-2xl); }
.section         { padding-block: var(--section-y); }
.divider         { height: 1px; background: var(--divider); border: 0; margin: 0; }
.shadow-1        { box-shadow: var(--elev-1); }
.shadow-2        { box-shadow: var(--elev-2); }
.shadow-3        { box-shadow: var(--elev-3); }