/*
 * CloudHost.ke design tokens: the single source for colours, type, spacing, radius,
 * shadows and button states (fix guide Phase 3 step 1).
 * Values are taken from the live Next.js site's computed styles (2026-10-06).
 * Loaded by: the marketing site (src/app/globals.css) and the WHMCS child theme
 * (templates/cloudtrade/css/design-tokens.css, copied from here at deploy).
 * Edit here only. Never type these values into either site directly.
 */
:root {
  /* Brand */
  --ch-blue-600: #2563eb;          /* primary */
  --ch-blue-700: #1d4ed8;          /* primary hover */
  --ch-blue-800: #1e40af;          /* chip text */
  --ch-indigo-600: #4f46e5;        /* gradient end */
  --ch-indigo-700: #4338ca;
  --ch-navy-900: #001537;          /* logo navy */
  --ch-cyan-600: #0284c7;
  --ch-emerald-600: #059669;
  --ch-emerald-700: #047857;
  --ch-amber-50: #fffbeb;
  --ch-amber-200: #fde68a;
  --ch-amber-900: #78350f;
  --ch-red-600: #dc2626;

  /* Neutrals (Tailwind slate scale as used on the site) */
  --ch-ink: #0f172a;               /* headings, body text */
  --ch-ink-2: #334155;             /* nav links, secondary text */
  --ch-ink-3: #475569;
  --ch-muted: #64748b;
  --ch-line: #e2e8f0;
  --ch-line-blue: #bfdbfe;
  --ch-surface: #ffffff;
  --ch-surface-2: #f8fafc;
  --ch-page: #fafcff;
  --ch-ice-50: #eff6ff;
  --ch-ice-100: #e8f2fe;

  /* Semantic */
  --ch-primary: var(--ch-blue-600);
  --ch-primary-hover: var(--ch-blue-700);
  --ch-primary-gradient: linear-gradient(to right, var(--ch-blue-600), var(--ch-indigo-600));
  --ch-primary-gradient-hover: linear-gradient(to right, var(--ch-blue-700), var(--ch-indigo-700));
  --ch-success: var(--ch-emerald-600);
  --ch-danger: var(--ch-red-600);
  --ch-link: var(--ch-blue-600);
  --ch-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* Type */
  --ch-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ch-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ch-text-xs: 12px;
  --ch-text-sm: 14px;
  --ch-text-base: 16px;
  --ch-text-lg: 18px;
  --ch-text-xl: 20px;
  --ch-text-2xl: 24px;
  --ch-text-3xl: 30px;
  --ch-text-4xl: 36px;
  --ch-text-5xl: 48px;
  --ch-weight-medium: 500;
  --ch-weight-semibold: 600;
  --ch-weight-bold: 700;
  --ch-weight-black: 900;
  --ch-heading-tracking: -0.025em;
  --ch-label-tracking: 0.05em;     /* mono uppercase labels and buttons */

  /* Spacing (4px scale) */
  --ch-space-1: 4px;
  --ch-space-2: 8px;
  --ch-space-3: 12px;
  --ch-space-4: 16px;
  --ch-space-5: 20px;
  --ch-space-6: 24px;
  --ch-space-8: 32px;
  --ch-space-10: 40px;
  --ch-space-12: 48px;
  --ch-container: 1280px;          /* max-w-7xl */
  --ch-gutter: 16px;               /* phone; 24px at >=640px, 32px at >=1024px */

  /* Radius */
  --ch-radius-sm: 8px;
  --ch-radius-md: 12px;            /* buttons, inputs */
  --ch-radius-lg: 16px;
  --ch-radius-xl: 24px;            /* cards */
  --ch-radius-pill: 9999px;        /* chips */

  /* Shadows */
  --ch-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ch-shadow-card: 0 10px 28px -10px rgba(37, 99, 235, 0.08), 0 2px 6px rgba(15, 23, 42, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.95);
  --ch-shadow-btn: 0 4px 6px -1px rgba(37, 99, 235, 0.25);

  /* Header and footer */
  --ch-header-bg: rgba(255, 255, 255, 0.9);
  --ch-header-border: 1px solid rgba(226, 232, 240, 0.8);
  --ch-header-blur: blur(16px);
  --ch-header-height: 80px;
  --ch-footer-bg: linear-gradient(rgba(239, 246, 255, 0.7), rgba(240, 249, 255, 0.3), #ffffff);
  --ch-footer-border: 1px solid rgba(191, 219, 254, 0.8);
  --ch-cta-band: linear-gradient(to right, #1d4ed8, #2563eb, #4f46e5);

  /* Cards and chips */
  --ch-card-bg: rgba(255, 255, 255, 0.85);
  --ch-card-border: 1px solid rgba(191, 219, 254, 0.85);
  --ch-chip-bg: rgba(239, 246, 255, 0.95);
  --ch-chip-fg: var(--ch-blue-800);
  --ch-chip-border: 1px solid rgba(191, 219, 254, 0.9);

  /* Buttons */
  --ch-btn-pad: 12px 20px;
  --ch-btn-pad-sm: 8px 16px;
  --ch-btn-font: var(--ch-font-sans);  /* 2026-10-07: monospace only for prices, domains, phone numbers */
  --ch-btn-size: 12px;
  --ch-btn-weight: 700;
  --ch-btn-transform: uppercase;
  --ch-btn-secondary-bg: var(--ch-ice-50);
  --ch-btn-secondary-fg: var(--ch-blue-700);
  --ch-btn-secondary-border: 1px solid var(--ch-line-blue);
}

/* Shared primitives, usable by both sites without Tailwind. */
.ch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ch-space-2);
  padding: var(--ch-btn-pad); border-radius: var(--ch-radius-md); border: 0;
  background-image: var(--ch-primary-gradient); color: #fff;
  font-family: var(--ch-btn-font); font-size: var(--ch-btn-size); font-weight: var(--ch-btn-weight);
  letter-spacing: var(--ch-label-tracking); text-transform: var(--ch-btn-transform);
  box-shadow: var(--ch-shadow-btn); text-decoration: none; cursor: pointer;
  transition: background-image .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ch-btn:hover { background-image: var(--ch-primary-gradient-hover); color: #fff; text-decoration: none; }
.ch-btn:focus-visible { outline: none; box-shadow: var(--ch-focus-ring); }
.ch-btn:disabled, .ch-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ch-btn--secondary {
  background: var(--ch-btn-secondary-bg); background-image: none; color: var(--ch-btn-secondary-fg);
  border: var(--ch-btn-secondary-border); box-shadow: var(--ch-shadow-xs);
}
.ch-btn--secondary:hover { background: var(--ch-primary); background-image: none; color: #fff; border-color: var(--ch-primary); }
.ch-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3.5px 10.4px;
  border-radius: var(--ch-radius-pill); border: var(--ch-chip-border);
  background: var(--ch-chip-bg); color: var(--ch-chip-fg);
  font-family: var(--ch-font-mono); font-size: 11.5px; font-weight: 600;
}
.ch-card {
  background: var(--ch-card-bg); border: var(--ch-card-border);
  border-radius: var(--ch-radius-xl); box-shadow: var(--ch-shadow-card);
}