/* ============================================================
   tokens.css — khadas.com design system (Wix-import friendly)
   Named CSS custom properties only. No layout here.
   Palette extracted from live khadas.com; type = Space Grotesk + Inter.
   ============================================================ */
:root{
  /* ---- brand palette (from live khadas.com) ---- */
  --blue:        #248eff;   /* primary brand blue */
  --blue-600:    #0573cb;
  --blue-700:    #0853b7;
  --navy:        #0a39a7;
  --cyan:        #00c7ff;   /* gradient partner / accent */
  --cyan-deep:   #029fe6;
  --warm:        #df3131;   /* warm accent (sparing) */

  --ink:         #0b0d10;   /* near-black text / dark sections */
  --ink-2:       #39424e;   /* body text */
  --grey:        #5b6470;   /* muted */
  --grey-2:      #8f97a3;
  --line:        #e4eaf1;   /* hairlines */
  --tint:        #ebf6ff;   /* pale-blue section tint (A1) */
  --tint-2:      #f5f9ff;
  --white:       #ffffff;

  /* ---- signature gradients ---- */
  --grad-accent: linear-gradient(90deg, var(--blue), var(--cyan));
  --grad-accent-135: linear-gradient(135deg, var(--blue), var(--cyan));
  --grad-soft:   linear-gradient(180deg, var(--tint) 0%, var(--white) 62%);   /* A1 */
  --grad-soft-rev: linear-gradient(180deg, var(--white) 0%, var(--tint) 100%);
  --grad-dark:   radial-gradient(120% 120% at 70% 10%, #16243b 0%, #0b0f17 55%, #070a10 100%);

  /* ---- type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  /* fluid scale via clamp(): min @414  →  max @1440 */
  --fs-hero:   clamp(2.6rem, 1.4rem + 5.2vw, 4.6rem);
  --fs-h1:     clamp(2.1rem, 1.3rem + 3.4vw, 3.25rem);
  --fs-h2:     clamp(1.6rem, 1.15rem + 1.9vw, 2.25rem);
  --fs-h3:     clamp(1.2rem, 1.0rem + 0.9vw, 1.5rem);
  --fs-lead:   clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-eyebrow:0.78rem;

  /* ---- spacing (8pt) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 4vw + 40px, 128px);

  /* ---- shape / depth ---- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(11,13,16,.06);
  --shadow-md: 0 14px 40px rgba(16,42,80,.10);
  --shadow-blue: 0 18px 50px rgba(36,142,255,.22);

  /* ---- layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 66px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .45s;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: .001s; }
}