/* ============================================================
   K SMART · Design tokens — single source of truth for the look
   ============================================================ */
:root{
  /* Colour — bright, crisp, retail-tech */
  --paper:#F4F6FB;
  --paper-2:#EAEEF6;
  --paper-3:#E1E7F1;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;

  --ink:#0B1220;
  --ink-2:#2B3242;
  --ink-3:#5A6273;
  --ink-4:#636B7A;
  --ink-5:#BAC1CF;

  --line:#E4E8F0;
  --line-2:#EEF1F7;

  --brand:#0B5FFF;          /* K Smart blue */
  --brand-deep:#0743C2;
  --brand-soft:#E9F0FF;
  --sky:#38A9FF;
  --violet:#6C5CE7;
  --emerald:#06A97C;        /* savings / in-stock / trust */
  --emerald-soft:#E5F7F1;
  --gold:#D6A32E;           /* ratings / premium accents */
  --rose:#E5484D;
  --whatsapp:#25D366;

  /* Type */
  --f-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  --t-hero:clamp(2.5rem,1.1rem + 6vw,6rem);
  --t-h1:clamp(2.2rem,1.2rem + 4.4vw,4.4rem);
  --t-h2:clamp(1.9rem,1.15rem + 3.1vw,3.6rem);
  --t-h3:clamp(1.35rem,1.05rem + 1.4vw,2.05rem);
  --t-h4:clamp(1.05rem,.96rem + .48vw,1.35rem);
  --t-lead:clamp(1.02rem,.96rem + .45vw,1.28rem);
  --t-body:clamp(.95rem,.92rem + .16vw,1.02rem);
  --t-small:.875rem;
  --t-tiny:.78rem;
  --t-label:.6875rem;

  --lh-tight:1.05;
  --lh-snug:1.22;
  --lh-body:1.62;

  /* Space */
  --gutter:clamp(1.15rem,4vw,3rem);
  --maxw:1300px;
  --maxw-wide:1500px;
  --maxw-narrow:760px;
  --sec-y:clamp(4rem,8vw,8.5rem);
  --sec-y-tight:clamp(3rem,5.5vw,6rem);

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-2xl:42px; --r-pill:999px;

  /* Elevation */
  --sh-1:0 1px 2px rgba(11,18,32,.04),0 2px 8px rgba(11,18,32,.03);
  --sh-2:0 2px 4px rgba(11,18,32,.04),0 10px 24px -6px rgba(11,18,32,.07);
  --sh-3:0 4px 10px rgba(11,18,32,.045),0 22px 46px -12px rgba(11,18,32,.13);
  --sh-4:0 10px 20px rgba(11,18,32,.05),0 40px 82px -22px rgba(11,18,32,.2);
  --sh-brand:0 12px 32px -8px rgba(11,95,255,.45);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(11,18,32,.05);

  /* Motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-spring:cubic-bezier(.34,1.4,.5,1);

  /* Chrome */
  --nav-h:68px;
  --bar-h:38px;
  --z-cursor:200;--z-loader:190;--z-toast:150;--z-modal:140;--z-drawer:120;--z-header:100;--z-fab:90;

  --glass-bg:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.9);
  --glass-blur:saturate(180%) blur(20px);
}