/*
  CodideX Design Tokens
  Centralized values for color, typography, spacing, shadows, radii, and motion.
*/

:root {
  /* Brand colors */
  --cdx-primary-50: #eef6ff;
  --cdx-primary-100: #d9ebff;
  --cdx-primary-200: #b9dcff;
  --cdx-primary-300: #88c6ff;
  --cdx-primary-400: #51a5f6;
  --cdx-primary-500: #2f80ed;
  --cdx-primary-600: #1d65d8;
  --cdx-primary-700: #1a50af;
  --cdx-primary-800: #1a448d;
  --cdx-primary-900: #173a73;

  --cdx-secondary-50: #f0fbf8;
  --cdx-secondary-100: #d5f4eb;
  --cdx-secondary-200: #aeebda;
  --cdx-secondary-300: #78dcc3;
  --cdx-secondary-400: #40c5a5;
  --cdx-secondary-500: #20a98b;
  --cdx-secondary-600: #168a73;
  --cdx-secondary-700: #136f5e;
  --cdx-secondary-800: #13584d;
  --cdx-secondary-900: #124940;

  --cdx-accent: #7c5cff;
  --cdx-info: #0ea5e9;
  --cdx-success: #16a34a;
  --cdx-warning: #f59e0b;
  --cdx-danger: #dc2626;

  /* Neutral palette */
  --cdx-white: #ffffff;
  --cdx-gray-50: #f8fafc;
  --cdx-gray-100: #f1f5f9;
  --cdx-gray-200: #e2e8f0;
  --cdx-gray-300: #cbd5e1;
  --cdx-gray-400: #94a3b8;
  --cdx-gray-500: #64748b;
  --cdx-gray-600: #475569;
  --cdx-gray-700: #334155;
  --cdx-gray-800: #1e293b;
  --cdx-gray-900: #0f172a;
  --cdx-black: #020617;

  /* Semantic surfaces */
  --cdx-body-bg: #f6f8fb;
  --cdx-surface: #ffffff;
  --cdx-surface-soft: #f8fafc;
  --cdx-surface-muted: #eef2f7;
  --cdx-surface-raised: #ffffff;
  --cdx-border: #e5eaf1;
  --cdx-border-strong: #cbd5e1;
  --cdx-text: #182235;
  --cdx-text-muted: #64748b;
  --cdx-heading: #0f172a;

  /* Typography */
  --cdx-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cdx-font-display: "Manrope", "Inter", "Segoe UI", sans-serif;
  --cdx-font-size-xs: 0.75rem;
  --cdx-font-size-sm: 0.875rem;
  --cdx-font-size-md: 1rem;
  --cdx-font-size-lg: 1.125rem;
  --cdx-font-size-xl: 1.25rem;
  --cdx-font-size-2xl: 1.5rem;
  --cdx-font-size-3xl: 2rem;
  --cdx-font-size-4xl: 2.5rem;
  --cdx-line-height-tight: 1.15;
  --cdx-line-height-normal: 1.55;

  /* Spacing */
  --cdx-space-0: 0;
  --cdx-space-1: 0.25rem;
  --cdx-space-2: 0.5rem;
  --cdx-space-3: 0.75rem;
  --cdx-space-4: 1rem;
  --cdx-space-5: 1.25rem;
  --cdx-space-6: 1.5rem;
  --cdx-space-8: 2rem;
  --cdx-space-10: 2.5rem;
  --cdx-space-12: 3rem;
  --cdx-space-16: 4rem;

  /* Radius */
  --cdx-radius-xs: 0.25rem;
  --cdx-radius-sm: 0.375rem;
  --cdx-radius-md: 0.5rem;
  --cdx-radius-lg: 0.75rem;
  --cdx-radius-xl: 1rem;
  --cdx-radius-2xl: 1.25rem;
  --cdx-radius-pill: 999px;

  /* Shadows */
  --cdx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --cdx-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  --cdx-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.09);
  --cdx-shadow-lg: 0 28px 70px rgba(15, 23, 42, 0.14);
  --cdx-shadow-xl: 0 34px 90px rgba(15, 23, 42, 0.18);
  --cdx-shadow-focus: 0 0 0 0.25rem rgba(47, 128, 237, 0.16);
  --cdx-shadow-hover: 0 20px 52px rgba(15, 23, 42, 0.12);
  --cdx-shadow-card: 0 1px 1px rgba(15, 23, 42, 0.03), 0 12px 32px rgba(15, 23, 42, 0.065);
  --cdx-shadow-card-hover: 0 1px 1px rgba(15, 23, 42, 0.04), 0 18px 46px rgba(15, 23, 42, 0.105);

  /* Layout */
  --cdx-sidebar-width: 280px;
  --cdx-sidebar-collapsed-width: 86px;
  --cdx-header-height: 72px;
  --cdx-content-max-width: 1440px;

  /* Motion */
  --cdx-transition-fast: 150ms ease;
  --cdx-transition-base: 240ms ease;
  --cdx-transition-slow: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --cdx-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --cdx-body-bg: #0d1424;
  --cdx-surface: #121c2e;
  --cdx-surface-soft: #172238;
  --cdx-surface-muted: #202c42;
  --cdx-surface-raised: #162238;
  --cdx-border: #28364d;
  --cdx-border-strong: #405069;
  --cdx-text: #dde7f4;
  --cdx-text-muted: #9aa8bc;
  --cdx-heading: #f8fafc;
  --cdx-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
  --cdx-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.32);
  --cdx-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.42);
  --cdx-shadow-xl: 0 36px 96px rgba(0, 0, 0, 0.48);
  --cdx-shadow-hover: 0 22px 58px rgba(0, 0, 0, 0.38);
  --cdx-shadow-card: 0 1px 1px rgba(255, 255, 255, 0.025), 0 18px 42px rgba(0, 0, 0, 0.28);
  --cdx-shadow-card-hover: 0 1px 1px rgba(255, 255, 255, 0.035), 0 24px 58px rgba(0, 0, 0, 0.38);
}