/* ===========================================
 * JarganWeb Design Tokens
 * CSS Custom Properties for theming
 * Synchronized with design-tokens.json and DesignTokens.cs
 * =========================================== */

:root {
  /* ═══════════════ BRAND COLORS ═══════════════ */
  --color-brand-primary: #DD5100;
  --color-brand-primary-light-10: #e56b1a;
  --color-brand-primary-light-20: #ed8534;
  --color-brand-primary-light-30: #f59f4e;
  --color-brand-primary-dark-10: #c64900;
  --color-brand-primary-dark-20: #b04100;

  --color-brand-secondary: #3B82F6;
  --color-brand-secondary-light-10: #5a95f7;
  --color-brand-secondary-light-20: #79a8f9;
  --color-brand-secondary-dark-10: #2563eb;
  --color-brand-secondary-dark-20: #1d4ed8;

  /* ═══════════════ STAGE COLORS ═══════════════ */
  --color-stage-awareness: #0dcaf0;
  --color-stage-consideration: #ffc107;
  --color-stage-decision: #198754;
  --color-stage-retention: #0d6efd;

  /* ═══════════════ POSITION TYPE COLORS ═══════════════ */
  --color-pt-coin: #0dcaf0;
  --color-pt-barbell: #f59e0b;
  --color-pt-flywheel: #198754;
  --color-pt-hub-spoke: #6f42c1;
  --color-pt-pyramid: #DD5100;

  /* ═══════════════ PLATFORM COLORS ═══════════════ */
  --color-platform-instagram: #e1306c;
  --color-platform-facebook: #1877f2;
  --color-platform-linkedin: #0a66c2;
  --color-platform-youtube: #ff0000;
  --color-platform-twitter: #1da1f2;
  --color-platform-tiktok: #000000;
  --color-platform-spotify: #1db954;
  --color-platform-email: #6b7280;
  --color-platform-sms: #25d366;
  --color-platform-blog: #14b8a6;

  /* ═══════════════ STATUS COLORS ═══════════════ */
  --color-status-success: #198754;
  --color-status-warning: #ffc107;
  --color-status-error: #dc2626;
  --color-status-info: #0dcaf0;

  /* ═══════════════ NEUTRAL COLORS ═══════════════ */
  --color-neutral-white: #ffffff;
  --color-neutral-gray-50: #f9fafb;
  --color-neutral-gray-100: #f3f4f6;
  --color-neutral-gray-200: #e5e7eb;
  --color-neutral-gray-300: #d1d5db;
  --color-neutral-gray-400: #9ca3af;
  --color-neutral-gray-500: #6b7280;
  --color-neutral-gray-600: #4b5563;
  --color-neutral-gray-700: #374151;
  --color-neutral-gray-800: #1f2937;
  --color-neutral-gray-900: #111827;
  --color-neutral-black: #000000;

  /* ═══════════════ VISUALIZATION COLORS ═══════════════ */
  --color-vis-line: #1F2937;
  --color-vis-node-fill: #FFFFFF;
  --color-vis-node-border: #374151;
  --color-vis-node-text: #1F2937;
  --color-vis-title: #111827;
  --color-vis-subtitle: #6B7280;
  --color-vis-highlight: #3B82F6;

  /* ═══════════════ BORDER RADIUS ═══════════════ */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ═══════════════ SHADOWS ═══════════════ */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);

  /* ═══════════════ TYPOGRAPHY ═══════════════ */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ═══════════════ SPACING ═══════════════ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ═══════════════ TRANSITIONS ═══════════════ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
}

/* ═══════════════ DARK THEME ═══════════════ */
[data-theme="dark"] {
  /* Brand colors - slightly brighter for dark backgrounds */
  --color-brand-primary: #ff6b1a;
  --color-brand-primary-light-10: #ff8534;
  --color-brand-primary-dark-10: #DD5100;

  /* Neutral colors - inverted */
  --color-neutral-white: #111827;
  --color-neutral-gray-50: #1f2937;
  --color-neutral-gray-100: #374151;
  --color-neutral-gray-200: #4b5563;
  --color-neutral-gray-300: #6b7280;
  --color-neutral-gray-400: #9ca3af;
  --color-neutral-gray-500: #d1d5db;
  --color-neutral-gray-600: #e5e7eb;
  --color-neutral-gray-700: #f3f4f6;
  --color-neutral-gray-800: #f9fafb;
  --color-neutral-gray-900: #ffffff;
  --color-neutral-black: #ffffff;

  /* Visualization colors - adjusted for dark */
  --color-vis-line: #e5e7eb;
  --color-vis-node-fill: #1f2937;
  --color-vis-node-border: #4b5563;
  --color-vis-node-text: #f3f4f6;
  --color-vis-title: #ffffff;
  --color-vis-subtitle: #9ca3af;

  /* Shadows - lighter for dark backgrounds */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ═══════════════ UTILITY CLASSES ═══════════════ */

/* Stage color backgrounds */
.bg-stage-awareness { background-color: var(--color-stage-awareness) !important; }
.bg-stage-consideration { background-color: var(--color-stage-consideration) !important; }
.bg-stage-decision { background-color: var(--color-stage-decision) !important; }
.bg-stage-retention { background-color: var(--color-stage-retention) !important; }

/* Stage color text */
.text-stage-awareness { color: var(--color-stage-awareness) !important; }
.text-stage-consideration { color: var(--color-stage-consideration) !important; }
.text-stage-decision { color: var(--color-stage-decision) !important; }
.text-stage-retention { color: var(--color-stage-retention) !important; }

/* Position type backgrounds */
.bg-pt-coin { background-color: var(--color-pt-coin) !important; }
.bg-pt-barbell { background-color: var(--color-pt-barbell) !important; }
.bg-pt-flywheel { background-color: var(--color-pt-flywheel) !important; }
.bg-pt-hub-spoke { background-color: var(--color-pt-hub-spoke) !important; }
.bg-pt-pyramid { background-color: var(--color-pt-pyramid) !important; }

/* Position type text */
.text-pt-coin { color: var(--color-pt-coin) !important; }
.text-pt-barbell { color: var(--color-pt-barbell) !important; }
.text-pt-flywheel { color: var(--color-pt-flywheel) !important; }
.text-pt-hub-spoke { color: var(--color-pt-hub-spoke) !important; }
.text-pt-pyramid { color: var(--color-pt-pyramid) !important; }

/* Platform backgrounds */
.bg-platform-instagram { background-color: var(--color-platform-instagram) !important; }
.bg-platform-facebook { background-color: var(--color-platform-facebook) !important; }
.bg-platform-linkedin { background-color: var(--color-platform-linkedin) !important; }
.bg-platform-youtube { background-color: var(--color-platform-youtube) !important; }
.bg-platform-twitter { background-color: var(--color-platform-twitter) !important; }
.bg-platform-tiktok { background-color: var(--color-platform-tiktok) !important; }
.bg-platform-spotify { background-color: var(--color-platform-spotify) !important; }
.bg-platform-email { background-color: var(--color-platform-email) !important; }
.bg-platform-blog { background-color: var(--color-platform-blog) !important; }

/* Status backgrounds */
.bg-status-success { background-color: var(--color-status-success) !important; }
.bg-status-warning { background-color: var(--color-status-warning) !important; }
.bg-status-error { background-color: var(--color-status-error) !important; }
.bg-status-info { background-color: var(--color-status-info) !important; }

/* Status text */
.text-status-success { color: var(--color-status-success) !important; }
.text-status-warning { color: var(--color-status-warning) !important; }
.text-status-error { color: var(--color-status-error) !important; }
.text-status-info { color: var(--color-status-info) !important; }

/* Brand colors */
.bg-brand-primary { background-color: var(--color-brand-primary) !important; }
.bg-brand-secondary { background-color: var(--color-brand-secondary) !important; }
.text-brand-primary { color: var(--color-brand-primary) !important; }
.text-brand-secondary { color: var(--color-brand-secondary) !important; }

/* Border radius utilities */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Shadow utilities */
.shadow-none { box-shadow: var(--shadow-none) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Transition utilities */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }