/* ============================================================
   LHAFIX TECHNOLOGIES — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   Derived from the Lhafix logo: brushed silver + electric blue on near-black.
   ============================================================ */

:root {
  /* ---- Brand palette (exact, from logo) ---- */
  --ink:            #0E1B2C;   /* primary text                */
  --ink-soft:       #5B6B7C;   /* muted / secondary text      */
  --blue:           #1D5FE8;   /* primary accent              */
  --blue-bright:    #4A8CFF;   /* hero accent / on-dark accent*/
  --blue-soft:      #EAF1FE;   /* tinted light backgrounds    */
  --silver:         #B7C1CC;
  --silver-dark:    #6B7684;
  --surface:        #F7F9FB;   /* light grey section bg       */
  --white:          #FFFFFF;
  --navy-1:         #0A1526;   /* hero navy start             */
  --navy-2:         #0F2545;   /* hero navy mid               */
  --navy-deep:      #060B14;   /* hero navy end / darkest     */
  --wa-green:       #25D366;   /* WhatsApp brand              */

  /* ---- Semantic aliases ---- */
  --bg:             var(--white);
  --bg-alt:         var(--surface);
  --text:           var(--ink);
  --text-muted:     var(--ink-soft);
  --accent:         var(--blue);
  --accent-bright:  var(--blue-bright);
  --border:         #E4E9F0;
  --border-strong:  #D3DAE4;

  /* ---- Dark surfaces (hero, page headers, footer, CTA band) ---- */
  --hero-grad:
     radial-gradient(1100px 640px at 72% -12%, rgba(74,140,255,.20), transparent 60%),
     radial-gradient(900px 600px at 8% 108%, rgba(29,95,232,.16), transparent 55%),
     linear-gradient(158deg, #0A1526 0%, #0B1A30 46%, #060B14 100%);
  --dark-text:        #EAF1FE;
  --dark-text-muted:  #9DB2D0;
  --dark-border:      rgba(183,193,204,.16);

  /* ---- Typography ---- */
  --font-head: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: .78rem;
  --fs-body:    1.0625rem;                       /* 17px base           */
  --fs-lead:    clamp(1.125rem, 0.9rem + 1vw, 1.375rem);
  --fs-h4:      clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  --fs-h3:      clamp(1.25rem, 1rem + 1.1vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.2rem + 3vw, 3rem);
  --fs-h1:      clamp(2.5rem, 1.4rem + 5vw, 4.6rem);
  --fs-display: clamp(2.8rem, 1.5rem + 5.4vw, 4.9rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.7;

  --tracking-eyebrow: .22em;

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 820px;
  --gutter:     clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --section-y:  clamp(4.5rem, 3rem + 7vw, 8rem);

  /* ---- Radius ---- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* ---- Shadow — real depth for light cards ---- */
  --sh-sm:   0 1px 2px rgba(14,27,44,.06), 0 2px 6px rgba(14,27,44,.05);
  --sh-md:   0 4px 12px rgba(14,27,44,.07), 0 14px 34px rgba(14,27,44,.10);
  --sh-lg:   0 10px 26px rgba(14,27,44,.10), 0 34px 74px rgba(14,27,44,.16);
  --sh-blue: 0 12px 30px rgba(29,95,232,.30);
  --sh-wa:   0 12px 30px rgba(37,211,102,.32);
  --glow-blue: 0 0 0 1px rgba(74,140,255,.35), 0 0 44px rgba(74,140,255,.28);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .2s;
  --dur-2: .4s;
  --dur-3: .7s;
}