/* ==========================================================================
   Gloria Technology Solutions — design tokens
   Source: Gloria Brand Guidelines V1.1 Visual Edition (Sept 2026), p.05 palette
   Values marked (derived) are not in the guide — they are tints/shades of
   official colors, added for accessibility or UI states. See DESIGN.md §2.
   ========================================================================== */

:root {
  /* ---- Official palette (guide p.05) ---- */
  --gloria-deep-navy: #001B4D;      /* authority, text, dark fields */
  --gloria-royal-blue: #003B83;     /* gradients, digital depth */
  --gloria-tech-blue: #075AAE;      /* controlled highlight, links */
  --gloria-gold: #D89512;           /* primary premium accent */
  --gloria-highlight-gold: #F3B62C; /* metallic highlight, campaign accents */
  --gloria-warm-white: #FAF8F3;     /* primary light background */

  /* ---- Surfaces (60% light) ---- */
  --bg: #FFFFFF;
  --bg-alt: var(--gloria-warm-white);
  --tint-navy: #E6E8ED;             /* (derived) navy 10% on white — hero shape, chips */
  --tint-gold: #F9EFDB;             /* (derived) gold 15% on white — hover wash */

  /* ---- Text ---- */
  --text: var(--gloria-deep-navy);
  --text-muted: #4D5F82;            /* (derived) navy 70% on white — 6.4:1 */
  --link: var(--gloria-tech-blue);
  --gold-text-lg: #B97D0B;          /* (derived) gold for text ≥24px bold on light bg — 3.5:1 */
  --gold-text: #9A6A0A;             /* (derived) gold for small text on light bg — 4.7:1 */

  /* ---- Brand actions (30% navy / 10% gold) ---- */
  --primary: var(--gloria-deep-navy);
  --primary-hover: var(--gloria-royal-blue);
  --on-primary: #FFFFFF;
  --accent: var(--gloria-highlight-gold);
  --accent-hover: var(--gloria-gold);
  --on-accent: var(--gloria-deep-navy);
  --rule-gold: var(--gloria-gold);  /* signature thin gold rules & card top bars */

  /* ---- Footer / dark fields ---- */
  --footer-bg: var(--gloria-deep-navy);
  --footer-surface: #142D5B;        /* (derived) white 8% on navy — social tiles */
  --footer-text: #B3BBCA;           /* (derived) white 70% on navy — 8.6:1 */
  --footer-heading: #FFFFFF;
  --footer-divider: rgba(216, 149, 18, 0.35);

  /* ---- Gradients ---- */
  --grad-promo: linear-gradient(-45deg, #001B4D, #003B83, #075AAE, #003B83);
  --grad-depth: linear-gradient(135deg, #001B4D 0%, #003B83 60%, #075AAE 100%);
  --grad-card: linear-gradient(to right top, #E6E8ED, #FAF8F3);
  /* Signature mode only — hero/campaign headlines on dark fields, never body text */
  --grad-gold-metal: linear-gradient(100deg, #C27F0A 0%, #F3B62C 35%, #FFE38A 50%, #F3B62C 65%, #C27F0A 100%);

  /* ---- Status (system feedback only, never decoration) ---- */
  --success: #198754;
  --warning: #F3B62C;
  --danger: #DC3545;
  --info: var(--gloria-tech-blue);

  /* ---- Typography ---- */
  --font-latin: "Poppins", system-ui, sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-body: var(--font-latin), var(--font-arabic);

  /* Type scale (1440px) */
  --fs-h1: 36px;  --lh-h1: 50px;
  --fs-h2: 40px;  --lh-h2: 48px;
  --fs-h3: 20px;  --lh-h3: 24px;
  --fs-nav: 17px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;              /* tagline: uppercase, letter-spaced */
  --tracking-eyebrow: 0.18em;

  /* ---- Shape & depth ---- */
  --radius-btn: 8px;               /* guide p.15 button */
  --radius-card: 12px;             /* guide p.03/p.13 cards */
  --radius-badge: 20px;
  --rule-top: 6px;                 /* gold top bar on cards (guide p.03, p.09) */
  --shadow-card: 0 4px 20px rgba(0, 27, 77, 0.06);
  --shadow-float: 0 20px 20px -20px rgba(0, 27, 77, 0.25);
  --glow-gold: 0 0 40px 1px rgba(243, 182, 44, 0.25); /* Signature mode only */

  /* ---- Layout ---- */
  --space: 5px;
  --container: 1320px;
  --transition-fast: 0.15s ease-in-out;
}