/* ============================================================
   VibeKrave — Canonical design tokens (Phase 1)
   The ONLY place brand colours, fonts, spacing and layout
   constants may be defined. Page CSS must consume these vars,
   never re-declare hex values.
   ============================================================ */

:root {
  /* --- Canonical colours --- */
  --vk-bg: #050510;
  --vk-surface: #11111D;
  --vk-surface-raised: #191928;
  --vk-text: #F7F7FB;
  --vk-muted: #9B9BAD;
  --vk-green: #00FF9D;
  --vk-cyan: #00CFFF;
  --vk-purple: #7B2EFF;
  --vk-pink: #FF4FD8;
  --vk-gold: #FFD43B;
  --vk-danger: #FF5A6F;
  --vk-border: rgba(255, 255, 255, 0.14);

  /* --- Derived tints (generate shades HERE, never in page files) --- */
  --vk-green-soft: rgba(0, 255, 157, 0.14);
  --vk-cyan-soft: rgba(0, 207, 255, 0.14);
  --vk-purple-soft: rgba(123, 46, 255, 0.18);
  --vk-pink-soft: rgba(255, 79, 216, 0.14);
  --vk-gold-soft: rgba(255, 212, 59, 0.16);
  --vk-danger-soft: rgba(255, 90, 111, 0.16);
  --vk-ink: #0A0A14; /* dark text on bright buttons */

  /* --- Typography (Roboto everywhere) --- */
  --vk-font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vk-font-display: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vk-weight-body: 400;
  --vk-weight-label: 500;
  --vk-weight-control: 600; /* rendered as 500/700 blend; Roboto has no 600 — use 700 */
  --vk-weight-heading: 700;
  --vk-weight-promo: 900;

  /* --- Type scale --- */
  --vk-text-xs: 0.75rem;
  --vk-text-sm: 0.875rem;
  --vk-text-md: 1rem;
  --vk-text-lg: 1.125rem;
  --vk-text-xl: 1.375rem;
  --vk-text-2xl: 1.75rem;
  --vk-text-3xl: 2.25rem;

  /* --- Spacing --- */
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 20px;
  --vk-space-6: 24px;
  --vk-space-8: 32px;

  /* --- Radius --- */
  --vk-radius-sm: 8px;
  --vk-radius-md: 12px;
  --vk-radius-lg: 16px;
  --vk-radius-xl: 24px;
  --vk-radius-pill: 999px;

  /* --- Layout --- */
  --vk-app-max-width: 480px;
  --vk-nav-height: 64px;
  --vk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vk-safe-top: env(safe-area-inset-top, 0px);
  /* Space content must reserve above the fixed bottom nav */
  --vk-nav-clearance: calc(var(--vk-nav-height) + var(--vk-safe-bottom));

  /* --- Sane z-index scale (replaces the 1,000,000+ values in Phase 2) --- */
  --vk-z-nav: 100;
  --vk-z-sticky: 110;
  --vk-z-drawer: 200;
  --vk-z-modal: 300;
  --vk-z-toast: 400;

  /* --- Motion --- */
  --vk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vk-fast: 150ms;
  --vk-normal: 250ms;
}