/* ============================================
   KRIVIO TECHNOLOGIES — DESIGN TOKENS
   "Build • Brand • Grow"
   ============================================ */

:root {
  /* ---- Color: Core ---- */
  --color-bg: #F6F8FC;              /* cool off-white */
  --color-bg-alt: #EDF1FA;          /* slightly deeper cool tint for section banding */
  --color-surface: #FFFFFF;         /* card surfaces */
  --color-ink: #0B1330;             /* deep navy — primary text, matches logo */
  --color-ink-soft: #4F5B7E;        /* secondary text, muted navy-blue */
  --color-ink-faint: #93A0C2;       /* tertiary / placeholder text */

  --color-violet: #1E4FFF;          /* primary accent — electric blue (was violet) */
  --color-violet-deep: #1339CC;     /* pressed / hover state */
  --color-violet-tint: #E7EDFF;     /* blue at ~8% for washes, chips */

  /* Logo-derived secondary accents — used sparingly, never all at once */
  --color-coral: #1E4FFF;           /* electric blue */
  --color-amber: #4FA3FF;           /* sky blue */
  --color-forest: #0B1330;          /* deep navy */

  --color-border: #E3E8F5;          /* hairline borders on cool white */
  --color-border-strong: #CBD5EC;

  /* ---- Color: Semantic (kept conventional — independent of brand accents,
         so status meaning stays clear regardless of theme) ---- */
  --color-success: #2E9E5B;
  --color-warning: #F5A623;
  --color-danger: #E5484D;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Sora', sans-serif;   /* headlines, nav, buttons */
  --font-body: 'Sora', 'Space Grotesk', sans-serif;      /* paragraphs, UI copy */
  --font-mono: 'JetBrains Mono', monospace;               /* stats, code-like labels */

  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px */
  --fs-xl: 1.75rem;     /* 28px */
  --fs-2xl: 2.5rem;     /* 40px */
  --fs-3xl: 3.5rem;     /* 56px */
  --fs-4xl: 4.75rem;    /* 76px */

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.02em;
  --ls-wide: 0.06em;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 9rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(36, 31, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(36, 31, 46, 0.08);
  --shadow-lg: 0 20px 48px rgba(36, 31, 46, 0.12);
  --shadow-violet: 0 10px 30px rgba(74, 58, 255, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --nav-height: 84px;
}

@media (max-width: 768px) {
  :root {
    --fs-4xl: 2.75rem;
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.75rem;
    --nav-height: 68px;
  }
}