/* ============================================================
   Injaz360 — Colors & Type Foundations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap');

/* ---- Fonts ---- */
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("assets/fonts/CreatoDisplay-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* General Sans (body) — loaded from Fontshare */
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap");

:root {
  /* ---------------------------------------------------------
     Brand Color Tokens (raw)
     --------------------------------------------------------- */
  --c-navy:        #02074F;  /* Dark Navy — primary text, dark bg */
  --c-blue:        #1C3C80;  /* Blue — supporting / shapes */
  --c-teal:        #298B9A;  /* Teal — secondary highlight */
  --c-green:       #73CA00;  /* Green — hero accent / CTAs */
  --c-yellow:      #FFFCF9;  /* Light Yellow — off-white */

  --c-light-blue:  #F2F3FF;  /* Soft blue tint background */
  --c-slate:       #617B85;  /* Muted slate — secondary text */
  --c-light-teal:  #E7F5F7;  /* Soft teal tint background */

  --c-white:       #FFFFFF;
  --c-black:       #000000;

  /* Tint / shade helpers used in UI states */
  --c-navy-90:     #1A1F61;
  --c-navy-80:     #353972;
  --c-navy-10:     #E0E1EE;
  --c-green-dark:  #5FA800;  /* hover */
  --c-green-press: #4F8C00;  /* active */
  --c-green-soft:  #ECF8D9;
  --c-teal-dark:   #1F7280;
  --c-teal-soft:   #D5EDF1;

  /* ---------------------------------------------------------
     Semantic Color Tokens — Light theme (default)
     --------------------------------------------------------- */
  --bg:            var(--c-yellow);
  --bg-elev:       var(--c-white);
  --bg-soft:       var(--c-light-blue);
  --bg-soft-2:     var(--c-light-teal);
  --bg-inverse:    var(--c-navy);

  --fg:            var(--c-navy);
  --fg-muted:      var(--c-slate);
  --fg-on-dark:    var(--c-white);
  --fg-on-accent:  var(--c-navy);   /* navy on green for CTAs */

  --accent:        var(--c-green);
  --accent-hover:  var(--c-green-dark);
  --accent-press:  var(--c-green-press);
  --accent-soft:   var(--c-green-soft);

  --highlight:     var(--c-teal);
  --highlight-soft:var(--c-teal-soft);

  --border:        rgba(2, 7, 79, 0.10);
  --border-strong: rgba(2, 7, 79, 0.22);
  --divider:       rgba(2, 7, 79, 0.06);

  /* Body-text-at-70%-opacity utility */
  --fg-70:         color-mix(in oklab, var(--fg) 70%, transparent);

  /* Status (derived from palette, cool / muted) */
  --status-success: var(--c-green);
  --status-info:    var(--c-teal);
  --status-warn:    #E0A100;
  --status-error:   #D2425E;

  /* ---------------------------------------------------------
     Typography
     --------------------------------------------------------- */
  --font-display: "Creato Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "General Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (per brand sheet) */
  --fs-eyebrow:    14px;   /* uppercase tracked label */
  --fs-sub:        20px;   /* subheadline */
  --fs-body-sm:    16px;
  --fs-body:       20px;
  --fs-cta:        22px;
  --fs-h4:         28px;
  --fs-h3:         36px;
  --fs-h2:         44px;
  --fs-h1:         56px;
  --fs-display:    96px;   /* oversized stat numbers */

  --lh-tight:      1.05;
  --lh-snug:       1.20;
  --lh-normal:     1.45;
  --lh-loose:      1.65;

  --tracking-eyebrow: 0.18em; /* ~100/1000 of font size at 14px ≈ 0.1; brand says 100px tracking on sub-headlines */
  --tracking-sub:     0.10em;
  --tracking-tight:  -0.01em;

  /* ---------------------------------------------------------
     Spacing & shape — see spacing.css for the rest
     --------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(2, 7, 79, 0.06), 0 1px 1px rgba(2, 7, 79, 0.04);
  --shadow-2: 0 4px 12px rgba(2, 7, 79, 0.08), 0 1px 2px rgba(2, 7, 79, 0.04);
  --shadow-3: 0 12px 32px rgba(2, 7, 79, 0.12), 0 2px 6px rgba(2, 7, 79, 0.06);
  --shadow-accent: 0 8px 24px rgba(115, 202, 0, 0.30);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring:   cubic-bezier(0.5, 1.6, 0.4, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
}

/* Arabic UI — Creato/General Sans lack Arabic glyphs; Plex Arabic pairs cleanly with the palette */
[dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Dark theme — opt-in via [data-theme="dark"] on root or a section */
[data-theme="dark"] {
  --bg:           var(--c-navy);
  --bg-elev:      #0A1166;        /* slightly lifted navy */
  --bg-soft:      #0E1670;
  --bg-soft-2:    #14227A;
  --bg-inverse:   var(--c-yellow);

  --fg:           var(--c-white);
  --fg-muted:     #9FAEC4;
  --fg-on-dark:   var(--c-white);
  --fg-on-accent: var(--c-navy);

  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --divider:       rgba(255, 255, 255, 0.06);
  --fg-70:         color-mix(in oklab, var(--fg) 70%, transparent);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Element-level defaults & semantic helpers
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 500;          /* General Sans Medium preferred for readability */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; }

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-70);       /* brand tip: body at 70% opacity makes headlines pop */
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.eyebrow,
.subheadline {
  font-family: var(--font-display);
  font-weight: 800;          /* ExtraBold per brand sheet */
  text-transform: uppercase;
  letter-spacing: var(--tracking-sub);
  font-size: var(--fs-sub);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-teal);
}

.cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-cta);
  letter-spacing: 0;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.95;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.stat-caption {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  font-weight: 500;
}

a {
  color: var(--c-teal);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--c-teal) 35%, transparent);
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--c-teal-dark); border-color: var(--c-teal-dark); }

::selection { background: var(--c-green); color: var(--c-navy); }