/* ========================================
   Consolidated Design Tokens - 12 Core Colors
   ======================================== */

:root {
  /* ============ 12 CORE COLORS ============ */
  
  /* 1-3: Primary Blue Shades */
  --color-primary: #3b82f6;      /* Main blue */
  --color-primary-dark: #2563eb; /* Darker blue for hover */
  --color-primary-light: #dbeafe;/* Light blue for backgrounds */
  
  /* 4-5: Neutral Grays */
  --color-neutral-dark: #111827; /* Dark text/headings */
  --color-neutral-light: #f9fafb;/* Light backgrounds */
  
  /* 6-7: Semantic Greens */
  --color-success: #10b981;      /* Success/positive */
  --color-success-light: #d1fae5;/* Success backgrounds */
  
  /* 8-9: Semantic Reds */
  --color-error: #ef4444;        /* Error/negative */
  --color-error-light: #fee2e2;  /* Error backgrounds */
  
  /* 10: Warning Yellow */
  --color-warning: #f59e0b;      /* Warnings/cautions */
  
  /* 11-12: Base Colors */
  --color-white: #ffffff;        /* Pure white */
  --color-border: #e5e7eb;       /* All borders */
  
  /* ============ DERIVED COLORS (using the 12 core) ============ */
  
  /* Text colors derived from core */
  --color-text-primary: var(--color-neutral-dark);
  --color-text-secondary: color-mix(in srgb, var(--color-neutral-dark) 60%, var(--color-white));
  --color-text-muted: color-mix(in srgb, var(--color-neutral-dark) 40%, var(--color-white));
  --color-text-inverse: var(--color-white);
  
  /* Background colors derived from core */
  --color-background: var(--color-white);
  --color-background-secondary: var(--color-neutral-light);
  --color-background-hover: color-mix(in srgb, var(--color-neutral-light) 50%, var(--color-white));
  
  /* Interactive states derived from core */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);
  --color-focus: var(--color-primary);
  --color-focus-ring: color-mix(in srgb, var(--color-primary) 20%, transparent);
  
  /* Button colors derived from core */
  --color-button-primary: var(--color-primary);
  --color-button-primary-hover: var(--color-primary-dark);
  --color-button-secondary: var(--color-neutral-dark);
  --color-button-secondary-hover: color-mix(in srgb, var(--color-neutral-dark) 80%, var(--color-white));
  --color-button-success: var(--color-success);
  --color-button-success-hover: color-mix(in srgb, var(--color-success) 80%, var(--color-neutral-dark));
  
  /* Border colors derived from core */
  --color-border-hover: color-mix(in srgb, var(--color-border) 70%, var(--color-neutral-dark));
  --color-border-focus: var(--color-primary);
  
  /* Shadow colors derived from core */
  --color-shadow: color-mix(in srgb, var(--color-neutral-dark) 10%, transparent);
  --color-shadow-dark: color-mix(in srgb, var(--color-neutral-dark) 20%, transparent);
  
  /* ============ TYPOGRAPHY ============ */
  
  /* Font families */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  
  /* Font sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* ============ SPACING ============ */
  
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  
  /* ============ BORDERS & RADIUS ============ */
  
  --border-width: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem;   /* 8px */
  --radius-xl: 0.75rem;  /* 12px */
  --radius-full: 9999px;
  
  /* ============ SHADOWS ============ */
  
  --shadow-sm: 0 1px 2px 0 var(--color-shadow);
  --shadow-base: 0 1px 3px 0 var(--color-shadow), 0 1px 2px -1px var(--color-shadow);
  --shadow-md: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);
  --shadow-lg: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow);
  --shadow-xl: 0 20px 25px -5px var(--color-shadow), 0 8px 10px -6px var(--color-shadow);
  
  /* ============ TRANSITIONS ============ */
  
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  
  /* ============ Z-INDEX ============ */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  --z-top: 9999;
  
  /* ============ BREAKPOINTS ============ */
  
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
}

/* ============ UTILITY CLASSES ============ */

/* Apply the 12 core colors */
.color-primary { color: var(--color-primary) !important; }
.color-primary-dark { color: var(--color-primary-dark) !important; }
.color-primary-light { color: var(--color-primary-light) !important; }
.color-neutral-dark { color: var(--color-neutral-dark) !important; }
.color-neutral-light { color: var(--color-neutral-light) !important; }
.color-success { color: var(--color-success) !important; }
.color-success-light { color: var(--color-success-light) !important; }
.color-error { color: var(--color-error) !important; }
.color-error-light { color: var(--color-error-light) !important; }
.color-warning { color: var(--color-warning) !important; }
.color-white { color: var(--color-white) !important; }
.color-border { color: var(--color-border) !important; }

/* Background utilities */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-neutral-dark { background-color: var(--color-neutral-dark) !important; }
.bg-neutral-light { background-color: var(--color-neutral-light) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-light { background-color: var(--color-error-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* Border utilities */
.border-primary { border-color: var(--color-primary) !important; }
.border-neutral { border-color: var(--color-border) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-error { border-color: var(--color-error) !important; }
.border-warning { border-color: var(--color-warning) !important; }

/* Text utilities */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-inverse { color: var(--color-text-inverse) !important; }

/* Animation for skeleton loading */
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}