/* ============================================================================
   Globex — design tokens
   ----------------------------------------------------------------------------
   THIS IS THE FILE YOU EDIT.

   Har colour, size, radius, shadow aur transition yahan ek baar likha hai.
   Yahan value badlo -> har page par apne aap lag jayega. Page ki apni CSS
   (css/pages/*.css) in variables ko use karti hai, hardcoded value nahi.

   Naam kaam ke hisaab se rakhe hain (--gx-ink, --gx-line), colour ke hisaab se
   nahi (--gx-slate-900). Isse "sab text thoda gehra karo" jaise change ek line
   mein ho jata hai, bina ye dhoonde ki kaunsa grey kahan use hua tha.

   Values guess nahi hain — root ke 21 pages ki inline CSS scan karke jo values
   sabse zyada pages par mili, wahi yahan hain (count comment mein hai).
   ============================================================================ */

:root {

  /* ── Brand ──────────────────────────────────────────────────────────────
     The navy is the primary identity colour; the orange is the call-to-action.
     Indigo/violet show up in the newer pages (courses, services).           */
  --gx-brand:          #1e2a5a;   /* 71 uses */
  --gx-brand-light:    #2d3f7a;
  --gx-brand-dark:     #0f1830;
  --gx-accent:         #ff8c42;   /* 63 uses — buttons, highlights */
  --gx-accent-soft:    #fff1e6;
  /* The orange is ~2:1 on white, so it fails contrast as TEXT. --gx-accent
     stays for fills and borders; use --gx-accent-ink for type on a light
     background. */
  --gx-accent-ink:     #9a4a00;
  --gx-indigo:         #4f46e5;   /* 26 uses */
  --gx-indigo-light:   #6366f1;
  --gx-violet:         #7c3aed;

  /* ── Text ───────────────────────────────────────────────────────────────
     Darkest to lightest. Use --gx-text for body copy and --gx-muted for
     secondary lines; anything lighter is for large or decorative type only. */
  --gx-ink:            #0f172a;   /* headings           — 8 pages */
  --gx-ink-soft:       #1e293b;   /* sub-headings       — 9 pages */
  --gx-text:           #475569;   /* body copy          — 9 pages */
  --gx-muted:          #64748b;   /* secondary text     — 9 pages */
  /* NOTE: --gx-muted-light is about 2.7:1 on white, which fails WCAG AA for
     normal text. It is kept as-is so nothing changes look unexpectedly. To fix
     contrast site-wide, set this to #64748b — one edit, every page.          */
  --gx-muted-light:    #94a3b8;   /* 6 pages */

  /* ── Surfaces ───────────────────────────────────────────────────────────  */
  --gx-white:          #ffffff;
  --gx-bg:             #f8fafc;   /* page background    — 10 pages */
  --gx-bg-alt:         #f8fafd;
  --gx-surface:        #f1f5f9;   /* cards, chips       — 9 pages */
  --gx-surface-tint:   #eef2ff;   /* hover / active     — 6 pages */
  --gx-surface-cool:   #eef2f8;
  --gx-line:           #e2e8f0;   /* borders, dividers  — 9 pages */
  --gx-line-soft:      #f1f1f1;

  /* ── Status ─────────────────────────────────────────────────────────────  */
  --gx-success:        #10b981;   /* 7 pages */
  --gx-success-dark:   #059669;
  --gx-danger:         #dc2626;   /* 46 uses */
  --gx-danger-dark:    #b91c1c;
  --gx-danger-soft:    #fee2e2;
  --gx-danger-tint:    #fef2f2;
  --gx-danger-line:    #fecaca;
  --gx-error:          #ef4444;
  --gx-info:           #3b82f6;

  /* ── Type ───────────────────────────────────────────────────────────────
     Two families: Inter for everything, Poppins for display headings on the
     pages that use it. Both are already loaded from Google Fonts.           */
  --gx-font:           'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gx-font-head:      'Poppins', 'Inter', sans-serif;

  --gx-fs-xxs:         0.7rem;
  --gx-fs-xs:          0.75rem;
  --gx-fs-sm:          0.85rem;
  --gx-fs-md:          0.9rem;    /* most used — 11 pages */
  --gx-fs-base:        1rem;
  --gx-fs-lg:          1.1rem;
  --gx-fs-xl:          1.2rem;
  --gx-fs-2xl:         1.5rem;
  --gx-fs-3xl:         1.8rem;
  --gx-fs-4xl:         2.2rem;
  --gx-fs-5xl:         2.5rem;

  /* ── Radius ─────────────────────────────────────────────────────────────  */
  --gx-r-sm:           8px;
  --gx-r:              12px;
  --gx-r-lg:           20px;
  --gx-r-xl:           30px;      /* pills — 11 pages */
  --gx-r-pill:         40px;
  --gx-r-circle:       50%;

  /* ── Elevation ──────────────────────────────────────────────────────────  */
  --gx-shadow-sm:      0 10px 25px -5px rgba(0,0,0,0.05);
  --gx-shadow:         0 10px 25px rgba(0,0,0,0.05);
  --gx-shadow-lg:      0 20px 35px rgba(30,42,90,0.1);

  /* ── Motion ─────────────────────────────────────────────────────────────
     Set both to "none" to switch every animation off site-wide.            */
  --gx-transition-fast: all 0.2s;
  --gx-transition:      all 0.3s ease;

  /* ── Layout ─────────────────────────────────────────────────────────────  */
  --gx-container:      1280px;
  --gx-gap:            1.5rem;

  /* ── Page rhythm (added 14 Aug 2026) ────────────────────────────────────
     Section spacing and display type, matching the reference layout the site
     is being rebuilt to. Change --gx-section-y once and every section on every
     page breathes differently.                                              */
  --gx-section-y:      5rem;      /* 80px — standard section padding */
  --gx-section-y-lg:   6rem;      /* 96px — feature sections */
  --gx-section-y-sm:   4rem;      /* 64px — compact sections */

  --gx-display:        clamp(2.25rem, 5.2vw, 4.5rem);  /* hero headline, up to 72px */
  --gx-display-2:      clamp(1.75rem, 3.2vw, 2.75rem); /* section headline */
  --gx-display-3:      clamp(1.25rem, 2vw, 1.5rem);    /* card headline */
  --gx-tracking-tight: -0.025em;

  /* Card surfaces used by the section components in theme.css. */
  --gx-card-radius:    16px;
  --gx-card-border:    1px solid var(--gx-line);
  --gx-card-shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(15, 23, 42, .28);
  --gx-card-shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 26px 48px -24px rgba(15, 23, 42, .35);

  /* Tinted band behind alternating sections. */
  --gx-band:           #f7f8fb;
}

/* Respect the reader's system setting without touching the tokens above. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gx-transition-fast: none;
    --gx-transition:      none;
  }
}