:root {
  /* ============= SPACE ============= */
  /* Single, consistent scale (4px base) */
  --cp-space-1: 0.25rem; /* 4px  */
  --cp-space-2: 0.5rem;  /* 8px  */
  --cp-space-3: 0.75rem; /* 12px */
  --cp-space-4: 1rem;    /* 16px */
  --cp-space-5: 1.25rem; /* 20px */
  --cp-space-6: 1.5rem;  /* 24px */
  --cp-space-8: 2rem;    /* 32px */
  --cp-space-12: 3rem;   /* 48px */

  /* Friendly aliases (optional) */
  --cp-space-xs: var(--cp-space-1);
  --cp-space-sm: var(--cp-space-2);
  --cp-space-md: var(--cp-space-3);
  --cp-space-lg: var(--cp-space-4);
  --cp-space-xl: var(--cp-space-6);
  --cp-space-2xl: var(--cp-space-8);
  --cp-space-3xl: var(--cp-space-12);

  /* ============= CONTAINERS ============= */
  /* Mirrors Tailwind defaults for familiarity */
  --cp-container-sm: 640px;
  --cp-container-md: 768px;
  --cp-container-lg: 1024px;
  --cp-container-xl: 1280px;
  --cp-container-2xl: 1536px;

  /* Page Layout */
  --cp-page-max-width: var(--cp-container-xl);
  --cp-page-padding-x: var(--cp-space-6);
  --cp-page-padding-y: var(--cp-space-6);

  /* Sidebar */
  --cp-sidebar-width: 16rem;           /* 256px */
  --cp-sidebar-width-collapsed: 4rem;  /* 64px  */

  /* ============= TYPOGRAPHY ============= */
  /* Base sizing */
  --cp-text-xs: 0.75rem;   /* 12px */
  --cp-text-sm: 0.875rem;  /* 14px */
  --cp-text-base: 1rem;    /* 16px */
  --cp-text-lg: 1.125rem;  /* 18px */
  --cp-text-xl: 1.25rem;   /* 20px */

  /* Fluid display sizes (modern, but safe) */
  --cp-text-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20–24px */
  --cp-text-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);  /* 24–30px */

  /* Weights & leading */
  --cp-font-light: 300;
  --cp-font-normal: 400;
  --cp-font-medium: 500;
  --cp-font-semibold: 600;
  --cp-font-bold: 700;

  --cp-leading-tight: 1.25;
  --cp-leading-normal: 1.5;
  --cp-leading-relaxed: 1.625;

  /* ============= RADII ============= */
  --cp-radius-sm: 0.375rem; /* 6px  */
  --cp-radius-md: 0.5rem;   /* 8px  */
  --cp-radius-lg: 1rem;     /* 16px */
  --cp-radius-xl: 1.5rem;   /* 24px */
  --cp-radius-pill: 9999px;

  /* Components derive from base radii */
  --cp-card-radius: var(--cp-radius-lg);
  --cp-card-radius-lg: var(--cp-radius-xl);

  /* ============= SHADOWS ============= */
  --cp-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.06);
  --cp-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --cp-shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);

  /* ============= MOTION ============= */
  --cp-duration-fast: 150ms;
  --cp-duration-normal: 200ms;
  --cp-duration-slow: 300ms;
  --cp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============= COLOR (LIGHT) ============= */
  /* Core neutrals (light) */
  --cp-bg: oklch(0.98 0 0);
  --cp-fg: oklch(0.16 0 0);
  --cp-surface: oklch(0.95 0 0);   /* panels/strips */
  --cp-muted: oklch(0.93 0 0);     /* chips/subtle */
  --cp-border: oklch(0.90 0 0);
  --cp-border-muted: oklch(0.88 0 0);

  /* Brand & focus (azure) */
  --cp-primary: oklch(0.62 0.17 255);
  --cp-on-primary: oklch(0.99 0 0);
  --cp-primary-hover:  oklch(0.58 0.17 255);
  --cp-primary-active: oklch(0.54 0.17 255);
  --cp-ring:  oklch(0.68 0.16 255);

  /* Semantic */
  --cp-success: oklch(0.67 0.14 150);
  --cp-on-success: oklch(0.99 0 0);
  --cp-success-soft: oklch(0.95 0.05 150);

  --cp-warning: oklch(0.78 0.16 90);
  --cp-on-warning: oklch(0.16 0 0);
  --cp-warning-soft: oklch(0.96 0.07 90);

  --cp-error: oklch(0.62 0.21 27);
  --cp-on-error: oklch(0.99 0 0);
  --cp-error-soft: oklch(0.96 0.05 27);

  --cp-info: oklch(0.64 0.16 255);
  --cp-on-info: oklch(0.99 0 0);
  --cp-info-soft: oklch(0.95 0.05 255);

  /* Sidebar/Header derive from core tokens */
  --cp-sidebar-bg: var(--cp-bg);
  --cp-sidebar-border: var(--cp-border);
  --cp-sidebar-text: oklch(0.35 0 0);
  --cp-sidebar-text-hover: oklch(0.22 0 0);
  --cp-sidebar-hover-bg: var(--cp-muted);
  --cp-sidebar-active-bg: color-mix(in oklch, var(--cp-primary) 12%, transparent);
  --cp-sidebar-active-text: var(--cp-primary);

  --cp-header-bg: oklch(1 0 0 / 0.85);
  --cp-header-border: var(--cp-border);
  --cp-header-text: oklch(0.2 0 0);

  /* Badges & Pills */
  --cp-badge-radius: var(--cp-radius-sm);
  --cp-badge-padding-x: var(--cp-space-2);
  --cp-badge-padding-y: 0.125rem;
  --cp-badge-font-size: var(--cp-text-xs);
  --cp-badge-font-weight: var(--cp-font-medium);

  --cp-pill-radius: var(--cp-radius-pill);
  --cp-pill-px: var(--cp-space-3);
  --cp-pill-py: var(--cp-space-1);

  /* Components (derive from spacing) */
  --cp-card-padding: var(--cp-space-6);
  --cp-card-padding-sm: var(--cp-space-4);

  /* Focus */
  --cp-focus-ring: 2px solid var(--cp-ring);
  --cp-focus-ring-offset: 2px;

  /* Skeletons */
  --cp-skeleton-base: rgb(243 244 246);   /* gray-100 */
  --cp-skeleton-shimmer: rgb(249 250 251);/* gray-50  */
}

/* ============= DARK MODE OVERRIDES ============= */
.dark {
  --cp-bg: oklch(0.15 0 0);
  --cp-fg: oklch(0.98 0 0);
  --cp-surface: oklch(0.18 0 0);
  --cp-muted: oklch(0.22 0 0);
  --cp-border: oklch(0.32 0 0);
  --cp-border-muted: oklch(0.28 0 0);

  --cp-primary: oklch(0.74 0.16 255);
  --cp-on-primary: oklch(0.15 0 0);
  --cp-primary-hover:  oklch(0.70 0.16 255);
  --cp-primary-active: oklch(0.66 0.16 255);
  --cp-ring:  oklch(0.78 0.13 255);

  --cp-success: oklch(0.76 0.14 150);
  --cp-on-success: oklch(0.15 0 0);
  --cp-success-soft: oklch(0.24 0.05 150);

  --cp-warning: oklch(0.86 0.16 90);
  --cp-on-warning: oklch(0.15 0 0);
  --cp-warning-soft: oklch(0.26 0.07 90);

  --cp-error: oklch(0.70 0.21 27);
  --cp-on-error: oklch(0.15 0 0);
  --cp-error-soft: oklch(0.25 0.05 27);

  --cp-info: oklch(0.78 0.15 255);
  --cp-on-info: oklch(0.15 0 0);
  --cp-info-soft: oklch(0.24 0.05 255);

  --cp-sidebar-bg: var(--cp-surface);
  --cp-sidebar-hover-bg: oklch(0.24 0 0);
  --cp-sidebar-text: oklch(0.90 0 0);
  --cp-sidebar-text-hover: oklch(0.98 0 0);
  --cp-sidebar-active-bg: color-mix(in oklch, var(--cp-primary) 18%, transparent);
  --cp-sidebar-active-text: var(--cp-primary);

  --cp-header-bg: oklch(0.18 0 0 / 0.9);
  --cp-header-border: var(--cp-border);
  --cp-header-text: var(--cp-fg);
}
