/**
 * LAF-Pack `cintelo`, theme `cintelo-ai` — the Cintelo dark purple.
 *
 * Colours, type, spacing, radii and shadows are the hub's live palette
 * (portal templates/themes/cintelo-ai/assets/css/tokens.css), which is what
 * hub.cintelo.ai users see today. Layout, fluid-scale and surface tokens are
 * the ones vb-base's pack.css and templates consume, carried over from
 * vb-base/cintelo-ai so this pack renders the same structure.
 *
 * DARK theme: numeric scales run darkest (50) to lightest (700/900).
 * Keith, 2026-09-30: dark purple is the pack's cintelo-ai theme.
 */

:root {
  color-scheme: dark;

  /* --- primary brand scale (500 = brand purple) --- */
  --vb-color-primary-50:  #1a0f2e;
  --vb-color-primary-100: #22143c;
  --vb-color-primary-200: #2e1f48;
  --vb-color-primary-400: #3e2a60;
  --vb-color-primary-500: #714daf;
  --vb-color-primary-600: #9370c9;
  --vb-color-primary-700: #b89cd6;

  /* --- accent (professional blue) --- */
  --vb-color-accent-400: #4d8abf;
  --vb-color-accent-500: #336699;
  --vb-color-accent-600: #5a9fd4;

  /* --- secondary (soft lilac) --- */
  --vb-color-secondary-500: #e0d6ec;
  --vb-color-secondary-600: #f0ebf5;

  /* --- neutral greyscale (low numbers darkest) --- */
  --vb-color-neutral-50:  #120c1e;
  --vb-color-neutral-100: #1a1230;
  --vb-color-neutral-200: #241a3e;
  --vb-color-neutral-300: #352a52;
  --vb-color-neutral-400: #5e4f7a;
  --vb-color-neutral-500: #8a7ba0;
  --vb-color-neutral-800: #d4cade;
  --vb-color-neutral-900: #ece8f2;

  /* --- surfaces & text --- */
  --vb-color-background:     #0f0a1e;
  --vb-color-surface:        #1a1230;
  --vb-color-border:         #2e2248;
  --vb-color-text-primary:   #ece8f2;
  --vb-color-text-secondary: #8a7ba0;
  --vb-color-text-muted:     #5e4f7a;
  --vb-color-text-inverse:   #0f0a1e;

  /* --- state --- */
  --vb-color-success-500: #22c55e;
  --vb-color-success-600: #16a34a;
  --vb-color-danger-500:  #ef4444;
  --vb-color-danger-600:  #dc2626;
  --vb-color-warning-500: #f59e0b;

  /* --- typography --- */
  --vb-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --vb-font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vb-font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Fira Code', 'Courier New', monospace;
  --vb-font-size-xs:   0.75rem;
  --vb-font-size-sm:   0.875rem;
  --vb-font-size-base: 1rem;
  --vb-font-size-lg:   1.125rem;
  --vb-font-size-xl:   1.25rem;
  --vb-font-size-2xl:  1.5rem;
  --vb-font-size-3xl:  1.875rem;
  --vb-font-size-5xl:  3rem;
  --vb-font-weight-normal:   400;
  --vb-font-weight-medium:   500;
  --vb-font-weight-semibold: 600;
  --vb-font-weight-bold:     700;
  --vb-line-height-tight:   1.25;
  --vb-line-height-snug:    1.375;
  --vb-line-height-normal:  1.5;
  --vb-line-height-relaxed: 1.6;

  /* --- spacing --- */
  --vb-space-1:  0.25rem;
  --vb-space-2:  0.5rem;
  --vb-space-3:  0.75rem;
  --vb-space-4:  1rem;
  --vb-space-5:  1.25rem;
  --vb-space-6:  1.5rem;
  --vb-space-8:  2rem;
  --vb-space-12: 3rem;
  --vb-space-16: 4rem;

  /* --- radii, shadows (heavier for dark surfaces), motion --- */
  --vb-radius-sm:   4px;
  --vb-radius-md:   6px;
  --vb-radius-lg:   8px;
  --vb-radius-xl:   12px;
  --vb-radius-full: 9999px;
  --vb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --vb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --vb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --vb-transition: all 0.2s ease-in-out;
  --vb-border-width: 1px;

  /* --- fluid type scale (min -> max across viewport) --- */
  --vb-font-size-fluid-sm: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --vb-font-size-fluid-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --vb-font-size-fluid-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --vb-font-size-fluid-xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --vb-font-size-fluid-2xl: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --vb-font-size-fluid-3xl: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

  /* --- fluid space scale --- */
  --vb-space-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --vb-space-fluid-md: clamp(1rem, 0.8rem + 1vw, 2rem);
  --vb-space-fluid-lg: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --vb-space-fluid-xl: clamp(3rem, 2rem + 5vw, 8rem);

  /* --- semantic layout tokens --- */
  --vb-container-pad-x: var(--vb-space-6);
  --vb-content-width: 1200px;
  --vb-wide-width: 80rem;
  --vb-section-pad-x: var(--vb-space-fluid-md);
  --vb-section-pad-y: var(--vb-space-fluid-xl);
  --vb-gap: var(--vb-space-fluid-md);
  --vb-cta-bg: var(--vb-color-primary-500);
  --vb-cta-text: var(--vb-color-text-primary);

  /* --- breakpoints (informational; @media in pack.css) --- */
  --vb-bp-sm: 640px;
  --vb-bp-md: 768px;
  --vb-bp-lg: 1024px;
  --vb-bp-xl: 1280px;

  /* --- surfaces (applied via .vb-surface--* in pack.css) ---
     Brand = the raised dark surface with light text, which is what the hub
     header wears today. vb-base's rule (brand = primary-600) would paint the
     header light lilac in a dark theme. */
  --vb-surface-default-bg:   var(--vb-color-background);
  --vb-surface-default-text: var(--vb-color-text-primary);
  --vb-surface-inverted-bg:  var(--vb-color-neutral-900);
  --vb-surface-inverted-text: var(--vb-color-text-inverse);
  --vb-surface-brand-bg:     var(--vb-color-surface);
  --vb-surface-brand-text:   var(--vb-color-text-primary);
}