/* =============================================================
   uno.com.my — Design Tokens
   Single source of truth for colour, type, spacing and motion.
   ============================================================= */

:root {
  /* ---- Brand ---------------------------------------------- */
  --uno-yellow:        #F7B500;
  --uno-yellow-600:    #E0A300;
  --uno-yellow-100:    #FFF3D1;
  --uno-ink:           #0B0B0B;
  --uno-navy:          #0F2350;
  --uno-navy-700:      #14306B;
  --uno-navy-900:      #091733;

  /* ---- Neutrals ------------------------------------------- */
  --c-black:           #101010;
  --c-graphite:        #1C1C1C;
  --c-slate:           #5C6470;
  --c-mist:            #9AA1AC;
  --c-line:            #E4E2DC;
  --c-line-dark:       rgba(255,255,255,.14);
  --c-cream:           #FBF7EF;
  --c-cream-2:         #F4EFE4;
  --c-paper:           #FFFFFF;
  --c-fog:             #F5F5F3;

  /* ---- Semantic ------------------------------------------- */
  --bg-body:           var(--c-paper);
  --bg-soft:           var(--c-cream);
  --bg-invert:         var(--c-black);
  --text-strong:       var(--c-black);
  --text-body:         var(--c-slate);
  --text-invert:       #FFFFFF;
  --text-invert-soft:  rgba(255,255,255,.72);
  --accent:            var(--uno-yellow);

  /* ---- Typography ----------------------------------------- */
  --font-sans: "Plus Jakarta Sans", "Poppins", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display:  clamp(2.6rem, 1.4rem + 4.4vw, 4.5rem);   /* hero h1        */
  --fs-h1:       clamp(2.1rem, 1.3rem + 3.0vw, 3.4rem);
  --fs-h2:       clamp(1.8rem, 1.2rem + 2.1vw, 2.75rem);
  --fs-h3:       clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --fs-h4:       clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-lead:     clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-body:     0.975rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.78rem;
  --fs-eyebrow:  0.72rem;
  --fs-stat:     clamp(2.4rem, 1.6rem + 2.8vw, 3.75rem);
  --fs-index:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);     /* the 01 / 02 / 03 */

  --lh-tight:    1.04;
  --lh-snug:     1.22;
  --lh-normal:   1.65;
  --tracking-tight: -0.025em;
  --tracking-wide:   0.16em;

  /* ---- Space (8pt) ---------------------------------------- */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 104px;
  --s-13: 128px;

  --section-y:      clamp(56px, 4vw + 32px, 104px);
  --section-y-lg:   clamp(72px, 5vw + 40px, 128px);

  /* ---- Shape ---------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------ */
  --sh-sm:  0 2px 8px rgba(16,16,16,.06);
  --sh-md:  0 10px 30px rgba(16,16,16,.08);
  --sh-lg:  0 24px 60px rgba(16,16,16,.12);
  --sh-nav: 0 8px 32px rgba(16,16,16,.10);

  /* ---- Layout --------------------------------------------- */
  --container:      1320px;
  --container-wide: 1440px;
  --gutter:         clamp(18px, 4vw, 40px);
  --header-h:       76px;

  /* ---- Motion --------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .18s;
  --t-base:    .32s;
  --t-slow:    .6s;

  --z-nav: 100;
  --z-drawer: 120;
  --z-modal: 200;
}