/* ============================================================================
   Al Ghafaq X — Brand tokens
   Colours extracted directly from "Al Ghafaq X Logo.jpg" (pixel-sampled).
   These are FACT from the logo and won't change. Everything else in the design
   system (spacing, type scale, component tokens) builds on top of these.
   ============================================================================ */
:root {
  /* ── Core ─────────────────────────────────────────────────────────────── */
  --agx-ink:        #141148;   /* deep twilight indigo — primary background   */
  --agx-ink-2:      #1D1866;   /* elevated surface (cards, nav) — derived     */
  --agx-ink-3:      #262072;   /* higher elevation / hover                    */
  --agx-white:      #FEFEFE;   /* wordmark / primary text on ink              */
  --agx-muted:      #A6A2CE;   /* muted lavender-grey text on ink            */
  --agx-line:       rgba(255,255,255,.10); /* hairline borders on ink         */

  /* ── Brand gradient (the signature sunset) ────────────────────────────── */
  --agx-magenta:    #E0266A;
  --agx-coral:      #F33F57;
  --agx-orange:     #F38037;
  --agx-amber:      #F49D28;

  --agx-primary:    var(--agx-magenta); /* primary accent / CTAs             */
  --agx-secondary:  var(--agx-orange);

  /* Use for buttons, the "X", droplets, active states, key highlights.
     Two-stop for tight elements, three-stop for large hero surfaces.        */
  --agx-gradient:      linear-gradient(135deg, #E0266A 0%, #F38037 100%);
  --agx-gradient-full: linear-gradient(135deg, #E0266A 0%, #F33F57 40%, #F38037 75%, #F49D28 100%);
  --agx-gradient-rgb:  224,38,106; /* magenta as rgb, for rgba() glows        */

  /* ── Radii / elevation (starting point, tune later) ───────────────────── */
  --agx-radius:     18px;
  --agx-radius-sm:  12px;
  --agx-shadow:     0 10px 30px rgba(0,0,0,.35);
  --agx-glow:       0 8px 30px rgba(224,38,106,.35); /* brand-coloured glow   */
}

/* Light surfaces (dashboards/reading views may want a light mode later).
   Kept minimal for now — the marketing/preview is dark-first like the logo. */
:root[data-theme="light"] {
  --agx-ink:   #FBFAFF;
  --agx-ink-2: #FFFFFF;
  --agx-white: #141148;   /* text flips to indigo on light                    */
  --agx-muted: #5A5680;
  --agx-line:  rgba(20,17,72,.10);
}