/* WiseTalk design tokens.
   Every colour, space, radius and size on the site resolves from this file.
   It must load BEFORE wisetalk.css, layout.css and site.css.
   Change a value here and it updates across all 17 pages. */

:root {
  /* Brand */
  --primary: #5539CC;
  --primary-deep: #4429B8;
  --primary-tint: #EEEAFB;
  --primary-light: #C8BEF0;
  --on-primary: #FFFFFF;

  /* Surfaces */
  --page-bg: #FAF9FE;
  --cream: #FAF6F0;
  --off-white: #FAF9FE;
  --surface: #FFFFFF;
  --border: #ECEAF3;
  --bubble-incoming: #F0EEF6;
  --skeleton: #F5F4FA;

  /* Text */
  --text-primary: #100B25;
  --text-secondary: #5A566B;
  --text-muted: #8E8AA0;

  /* Status */
  --success: #15A572;
  --success-tint: #E6F7EF;
  --warning: #D97706;
  --warning-tint: #FDF1E2;
  --danger: #DC2626;
  --danger-tint: #FCE8E8;

  /* Type */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Lora, Georgia, "Times New Roman", serif;
  /* Page type scale — smaller than original mockups, hero still leads sections */
  --type-hero: 52px;
  --type-hero-lh: 58px;
  --type-display: 40px;
  --type-display-lh: 46px;
  --type-section: 36px;
  --type-section-lh: 44px;
  --type-sub: 17px;
  --type-sub-lh: 28px;

  /* Spacing (4px grid) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Radii */
  --radius-xs: 4px;
  --radius-input: 12px;
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-hero: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(16, 11, 37, 0.04);
  --shadow-focus: 0 0 0 2px #5539CC;
  --opacity-orbit: 0.2;
  --opacity-logo-ghost: 0.1;

  /* Sizing */
  --width-text: 640px;
  --width-page: 1200px;
  --touch-target: 44px;
  --control-height: 48px;
  --page-margin-mobile: 16px;
  --page-margin-desktop: 40px;
  --nav-height-mobile: 56px;
  --nav-height-desktop: 72px;
  --logo-nav-mark: 20px;
  --logo-nav-wordmark: 16px;

  /* Motion */
  --duration-hover: 180ms;
  --duration-page: 300ms;}