/* ============================================================
   DEFT MAKMUR ENTERPRISE — Design Tokens
   Single source of truth for colour, type, spacing, motion.
   Derived from the DEFT Makmur logo: navy-to-light-blue gradient
   ribbon mark on white, with a slate-grey wordmark.
   ============================================================ */

:root {
  /* ---- Brand palette (from logo) ---- */
  --navy-deep:      #081B36;   /* darkest hero navy               */
  --navy-1:         #0D2A52;   /* hero navy start                 */
  --navy-2:         #14396E;   /* hero navy mid                   */
  --blue:           #2E5C9E;   /* primary accent                  */
  --blue-mid:       #4E7FC2;   /* gradient mid-point               */
  --blue-bright:    #7FB2E5;   /* logo light-blue end / on-dark   */
  --blue-soft:      #EAF2FB;   /* tinted light backgrounds        */
  --slate:          #5B6674;   /* wordmark grey ("MAKMUR")        */
  --slate-dark:     #38424E;
  --ink:            #101823;   /* primary text                    */
  --ink-soft:       #57626F;   /* muted / secondary text          */
  --surface:        #F6F8FB;   /* light grey section bg           */
  --white:          #FFFFFF;
  --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:         #E2E8F0;
  --border-strong:  #CBD5E1;

  /* ---- Dark surfaces (hero, page headers, footer, CTA band) ----
     Flat, corporate two-stop gradient only, no radial glow / blob accents. */
  --hero-grad: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy-1) 55%, var(--navy-2) 100%);
  --dark-text:        #EAF2FB;
  --dark-text-muted:  #A9C1DD;
  --dark-border:      rgba(127,178,229,.18);

  /* ---- Typography ---- */
  --font-head: "Plus Jakarta Sans", 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;
  --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.4rem, 1.3rem + 4.8vw, 4.3rem);
  --fs-display: clamp(2.6rem, 1.4rem + 5vw, 4.6rem);

  --lh-tight: 1.08;
  --lh-snug:  1.24;
  --lh-body:  1.7;

  --tracking-eyebrow: .2em;

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 780px;
  --gutter:     clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --section-y:  clamp(4rem, 2.8rem + 6vw, 7.5rem);

  /* ---- Radius ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* ---- Shadow (plain elevation, no colour glow) ---- */
  --sh-sm:   0 1px 2px rgba(16,24,35,.06), 0 2px 6px rgba(16,24,35,.05);
  --sh-md:   0 4px 12px rgba(16,24,35,.06), 0 14px 32px rgba(16,24,35,.09);
  --sh-lg:   0 10px 26px rgba(16,24,35,.09), 0 30px 66px rgba(16,24,35,.14);

  /* ---- 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;
}