/* ============================================================
   SHREE JEE INFOTECH — DESIGN TOKENS
   Single source of truth. Maps 1:1 to the Brand Guidelines
   (Edition 2026), §2 Core Colour, §3 Digital Accents, §4 Type.
   No raw hex anywhere else in the codebase — use these vars.
   ============================================================ */

:root {
  /* ---- §2 CORE COLOUR ---- */
  --navy:  #034BA0;  /* Infotech Navy — primary anchor, headings, logomark */
  --azure: #047FFB;  /* Signal Azure — accent, CTAs, links, highlights     */
  --ink:   #0B1220;  /* Ink Navy — darkest sections, footers, hero grounds  */
  --steel: #1B2A4A;  /* Steel Blue — body text on light, depth              */
  --sky:   #5AA0F0;  /* Sky Blue — supporting, hover states                 */
  --mist:  #8CBEE9;  /* Mist Blue — subtle fills, muted text on dark        */
  --mist-2: #D6E6FA; /* lighter mist (derived) — small sub-labels on navy, AA */
  --cloud: #F4F7FB;  /* Cloud — section backgrounds, cards                  */
  --line:  #E2E8F0;  /* Line Grey — borders, dividers, rules                */
  --slate: #475569;  /* Slate — secondary / caption text (deepened from brand
                        #64748B to clear WCAG AA 4.5:1 on cloud grounds)      */
  --white: #FFFFFF;

  /* ---- §3 DIGITAL ACCENTS (seasoning only) ---- */
  --cyan:    #00C2CB; /* Connectivity — live data, diagram links */
  --orange:  #FF7A30; /* Energy — a single hero stat / "new" flag */
  --violet:  #7C5CFC; /* Innovation — AI / new-feature tags */
  --emerald: #1FB57A; /* Uptime — success, "online", SLA met */
  --amber:   #FFC23C; /* Signal — warning, pending */
  --coral:   #FF4D6D; /* Alert — error, downtime */

  /* ---- Derived tints/shades (mathematical, never new hues) ---- */
  --azure-600: #0367cc;          /* azure darkened ~6% for hover */
  --azure-text: #0367cc;         /* azure for TEXT/fills on light — 5.3:1 on white,
                                    keeps AA where pure --azure (3.9:1) would fail */
  --navy-700:  #023a7d;          /* navy darkened for active     */
  --danger-text: #C0294A;        /* coral darkened for error text — AA on white */
  --ink-tint:  #111a2e;          /* ink lifted slightly for cards on ink */
  --azure-08:  rgba(4,127,251,0.08);
  --azure-12:  rgba(4,127,251,0.12);
  --navy-06:   rgba(3,75,160,0.06);
  --ink-shadow: rgba(11,18,32,0.08);
  --ink-shadow-strong: rgba(11,18,32,0.16);

  /* ---- §4 TYPOGRAPHY ---- */
  --font-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; /* H1/H2 */
  --font-body: Arial, Helvetica, system-ui, sans-serif;              /* H3, body, UI */

  --fs-h1: clamp(2.75rem, 1.6rem + 4.6vw, 4rem);   /* 44 → 64 */
  --fs-h2: clamp(1.875rem, 1.3rem + 2.3vw, 2.5rem);/* 30 → 40 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20 → 24 */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);/* 16 → 18 */
  --fs-eyebrow: 0.8125rem;                          /* 13 */

  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-body: 1.6;

  /* ---- SPACING (8px system) ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 2.5rem;  --sp-6: 3rem;   --sp-8: 4rem;   --sp-10: 5rem;
  --sp-12: 6rem;   --sp-16: 8rem;

  /* ---- LAYOUT ---- */
  --container: 1280px;
  --container-narrow: 920px;
  --radius: 12px;      /* cards */
  --radius-sm: 8px;    /* buttons / inputs */
  --radius-pill: 999px;

  /* ---- ELEVATION ---- */
  --shadow-card: 0 2px 8px var(--ink-shadow);
  --shadow-card-hover: 0 10px 28px var(--ink-shadow-strong);

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}