/**
 * Design System Tokens
 * 
 * This file contains NON-COLOR tokens only.
 * All colors are defined in globals.css for a single source of truth.
 * 
 * Contents:
 * - Spacing scale
 * - Container widths
 * - Typography scale
 * - Border radii
 * - Shadows
 * - Motion/transitions
 * - Component-specific tokens (card, badge, etc.)
 */

:root {
  /* ============= SPACING ============= */
  /* 4px base scale */
  --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 */
  --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 ============= */
  --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);
  --cp-page-padding: var(--cp-page-padding-x);

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

  /* ============= TYPOGRAPHY ============= */
  --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 */
  --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 */

  /* Display Typography (for headlines) */
  --cp-text-display-sm: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); /* 24-30px */
  --cp-text-display-md: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); /* 30-40px */
  --cp-text-display-lg: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* 40-56px */
  --cp-text-display-xl: clamp(3rem, 2.5rem + 3vw, 4.5rem); /* 48-72px */

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

  /* Line heights */
  --cp-leading-tight: 1.25;
  --cp-leading-normal: 1.5;
  --cp-leading-relaxed: 1.625;
  --cp-leading-display: 1.1; /* Tighter for large display text */

  /* Letter spacing */
  --cp-tracking-tight: -0.02em;
  --cp-tracking-normal: 0;
  --cp-tracking-wide: 0.05em;

  /* ============= 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;

  /* Component radii */
  --cp-card-radius: var(--cp-radius-lg);
  --cp-card-radius-lg: var(--cp-radius-xl);

  /* ============= SHADOWS ============= */
  --cp-shadow-1: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --cp-shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.1), 0 1px 3px 0 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);

  /* Component shadows */
  --cp-card-shadow: var(--cp-shadow-2);
  --cp-card-shadow-lg: var(--cp-shadow-3);

  /* ============= MOTION ============= */
  /* Durations */
  --cp-duration-fast: 150ms;
  --cp-duration-normal: 200ms;
  --cp-duration-slow: 300ms;
  --cp-duration-slower: 400ms;
  --cp-duration-slowest: 500ms;

  /* Easing functions */
  --cp-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --cp-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --cp-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --cp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --cp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cp-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Stagger delays for orchestrated animations */
  --cp-stagger-1: 50ms;
  --cp-stagger-2: 100ms;
  --cp-stagger-3: 150ms;
  --cp-stagger-4: 200ms;
  --cp-stagger-5: 250ms;

  /* Transform distances */
  --cp-translate-sm: 4px;
  --cp-translate-md: 8px;
  --cp-translate-lg: 16px;
  --cp-translate-xl: 24px;

  /* Aliases */
  --cp-transition-fast: var(--cp-duration-fast);
  --cp-transition-normal: var(--cp-duration-normal);
  --cp-transition-slow: var(--cp-duration-slow);

  /* ============= COMPONENT TOKENS ============= */

  /* Card */
  --cp-card-padding: var(--cp-space-6);
  --cp-card-padding-sm: var(--cp-space-4);
  --cp-card-border: var(--border);

  /* Badge */
  --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);

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

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

  /* Skeleton loading */
  --cp-skeleton-base: rgb(243 244 246);
  --cp-skeleton-shimmer: rgb(249 250 251);
}

/* Dark mode overrides for non-color tokens */
.dark {
  --cp-skeleton-base: rgb(55 65 81);
  --cp-skeleton-shimmer: rgb(75 85 99);
}
