/* ==========================================================================
   Zyncs — Design Tokens
   Single source of truth for color, gradient, type, space, motion.
   ========================================================================== */

:root {
  /* ---- Backgrounds ---------------------------------------------------- */
  --c-navy:        #030B14;   /* primary background */
  --c-graphite:    #07111D;   /* cards, panels, nav, footer */
  --c-black:       #010409;   /* high-contrast / overlays */
  --c-teal-black:  #031B22;   /* gradient transitions, depth */

  /* ---- Brand accents -------------------------------------------------- */
  --c-teal:        #00E0A4;   /* primary CTA, highlights, icons */
  --c-cyan:        #22DDF2;   /* glow, network lines, secondary */
  --c-emerald:     #16C784;   /* success / completed */

  /* ---- Text ----------------------------------------------------------- */
  --c-white:       #FFFFFF;   /* headlines */
  --c-soft-white:  #E8F1F2;   /* body */
  --c-slate:       #9AA7B2;   /* captions, helper, muted */

  /* ---- Lines & glows -------------------------------------------------- */
  --c-border-teal: rgba(0, 224, 164, 0.28);
  --c-glow-teal:   rgba(0, 224, 164, 0.18);
  --c-hairline:    rgba(255, 255, 255, 0.08);
  --c-hairline-2:  rgba(255, 255, 255, 0.14);

  /* ---- Problem / warmth ----------------------------------------------- */
  --c-red:         #FF5A5F;
  --c-amber:       #FFB84D;

  /* ---- Gradients ------------------------------------------------------ */
  --g-brand:  linear-gradient(135deg, #00E0A4 0%, #22DDF2 100%);
  --g-hero:   linear-gradient(135deg, #010409 0%, #030B14 45%, #031B22 100%);
  --g-card:   linear-gradient(145deg, rgba(7,17,29,0.92), rgba(3,27,34,0.72));
  --g-glow:   radial-gradient(circle, rgba(0,224,164,0.28) 0%, rgba(0,224,164,0.06) 48%, rgba(0,0,0,0) 75%);
  --g-glow-cyan: radial-gradient(circle, rgba(34,221,242,0.22) 0%, rgba(34,221,242,0.05) 50%, rgba(0,0,0,0) 75%);
  /* Warm counterpoint — the "hospitality" half of the warm×cool language */
  --c-warm:        #FFB84D;
  --c-warm-soft:   #FFCE85;
  --c-border-warm: rgba(255, 184, 77, 0.30);
  --c-glow-warm:   rgba(255, 153, 71, 0.16);
  --g-glow-warm: radial-gradient(circle, rgba(255,159,67,0.22) 0%, rgba(255,159,67,0.05) 50%, rgba(0,0,0,0) 75%);
  --g-warm-cool: linear-gradient(120deg, #FFB84D 0%, #00E0A4 55%, #22DDF2 100%);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Fluid type scale (min @ ~360px  →  max @ ~1280px) */
  --t-hero:    clamp(2.375rem, 1.10rem + 5.6vw, 5.25rem);   /* 38 → 84 */
  --t-page:    clamp(2.125rem, 1.30rem + 3.7vw, 4.25rem);   /* 34 → 68 */
  --t-section: clamp(1.75rem,  1.20rem + 2.4vw, 3.25rem);   /* 28 → 52 */
  --t-card:    clamp(1.25rem,  1.12rem + 0.6vw, 1.5rem);    /* 20 → 24 */
  --t-lead:    clamp(1.0625rem, 1.0rem + 0.5vw, 1.375rem);  /* 17 → 22 */
  --t-body:    clamp(1rem, 0.97rem + 0.2vw, 1.1875rem);     /* 16 → 19 */
  --t-small:   0.8125rem;  /* 13 */
  --t-label:   0.75rem;    /* 12 */

  /* ---- Spacing -------------------------------------------------------- */
  --container:    1280px;
  --container-sm: 920px;
  --pad-x:        clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --section-y:    clamp(4rem, 2rem + 7vw, 8.75rem);   /* 64 → 140 */
  --gap:          clamp(1.25rem, 0.8rem + 1.4vw, 2rem);

  /* ---- Radius --------------------------------------------------------- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Shadows -------------------------------------------------------- */
  --shadow-card:  0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --shadow-glow:  0 0 40px -6px var(--c-glow-teal);
  --shadow-cta:   0 18px 50px -16px rgba(0, 224, 164, 0.55);

  /* ---- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.4s;
  --dur-slow:  0.8s;
}