/**
 * CoursHub Creator - Design System Tokens
 *
 * Central theme configuration for all visual design constants.
 * Provides both raw palette tokens and semantic design tokens.
 *
 * USAGE:
 *   Use semantic tokens (--color-bg, --brand-primary, etc.) in components.
 *   Raw tokens (--gray-*, --brand-*) available for special cases.
 *
 * SCORM-SAFE: No external dependencies, offline-compatible.
 */

:root {
  /* ==================== RAW PALETTE ==================== */

  /* Grayscale - Light Theme */
  --gray-50: #f8f9fa;
  --gray-100: #f5f5f5;
  --gray-200: #e0e0e0;
  --gray-300: #d0d0d0;
  --gray-400: #999999;
  --gray-500: #777777;
  --gray-600: #666666;
  --gray-700: #555555;
  --gray-800: #333333;
  --gray-900: #1a1a1a;
  --gray-950: #0a0a0a;

  /* Gray opacity variants */
  --gray-900-55: rgba(23, 23, 23, 0.55);

  /* Black variations */
  --black-pure: #000000;
  --black-soft: #0a0a0a;
  --black-elevated: #1a1a1a;
  --black-elevated-2: #242424;

  /* White variations */
  --white-pure: #ffffff;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-03: rgba(255, 255, 255, 0.03);
  --white-02: rgba(255, 255, 255, 0.02);

  /* Brand colors */
  --brand-indigo-500: rgb(99, 102, 241);
  --brand-blue-500: rgb(59, 130, 246);
  --brand-emerald-500: rgb(16, 185, 129);
  --brand-amber-500: rgb(245, 158, 11);

  /* Status colors */
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* ==================== SEMANTIC TOKENS ==================== */

  /* Background colors - Light Theme (default for main app) */
  --color-bg-primary: var(--white-pure);
  --color-bg-secondary: var(--gray-50);
  --color-bg-tertiary: var(--gray-100);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.25);

  /* Text colors - Light Theme (default for main app) */
  --color-text-primary: var(--gray-800);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-500);
  --color-text-muted: var(--gray-400);

  /* Border colors - Light Theme */
  --color-border-primary: var(--gray-200);
  --color-border-hover: var(--gray-300);
  --color-border-focus: var(--blue-600);

  /* Border width */
  --border-width: 1px;

  /* Interactive colors - Light Theme */
  --color-hover-bg: var(--gray-50);
  --color-focus-ring: rgba(37, 99, 235, 0.2);

  /* Brand/Module accent colors */
  --color-accent-canvas: var(--brand-indigo-500);
  --color-accent-quiz: var(--brand-emerald-500);
  --color-accent-360: var(--brand-amber-500);
  --color-accent-glossary: var(--brand-blue-500);

  /* Status/action colors */
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-700);

  /* ==================== SPACING SCALE ==================== */

  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 1.75rem; /* 28px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */

  /* ==================== TYPOGRAPHY ==================== */

  /* Font families */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-mono: "SF Mono", "Monaco", "Consolas", monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.85rem; /* 13.6px */
  --font-size-base: 0.9rem; /* 14.4px */
  --font-size-md: 0.95rem; /* 15.2px */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.1rem; /* 17.6px */
  --font-size-2xl: 1.25rem; /* 20px */
  --font-size-3xl: 1.5rem; /* 24px */
  --font-size-4xl: 2rem; /* 32px */
  --font-size-5xl: 2.5rem; /* 40px */
  --font-size-6xl: 3rem; /* 48px */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1px;
  --letter-spacing-widest: 2px;

  /* ==================== BORDER RADIUS ==================== */

  --radius-sm: 3px;
  --radius-base: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ==================== SHADOWS (Light Theme) ==================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.25);
  --shadow-glow-sm: none;
  --shadow-glow-md: none;

  /* Status-specific shadows - Light Theme */
  --shadow-primary: 0 0 0 2px rgba(37, 99, 235, 0.2);
  --shadow-danger: 0 2px 8px rgba(220, 38, 38, 0.2);
  --shadow-danger-hover: 0 4px 12px rgba(220, 38, 38, 0.3);

  /* ==================== Z-INDEX SCALE ==================== */

  --z-base: 1;
  --z-elevated: 2;
  --z-sticky: 100;
  --z-modal-backdrop: 10000;
  --z-modal-confirm: 9999;

  /* ==================== TRANSITIONS ==================== */

  /* Durations */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-moderate: 0.3s;
  --duration-slow: 0.6s;
  --duration-splash-fade: 1.4s;

  /* Easing functions */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* Common transition presets */
  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-moderate: all var(--duration-moderate) var(--ease-out);
  --transition-colors:
    background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-opacity: opacity var(--duration-slow) var(--ease-in-out);

  /* ==================== DIMENSIONS ==================== */

  /* Container widths */
  --container-max-width: 1400px;
  --container-max-width-wide: 1600px;

  /* Component sizes */
  --size-icon-sm: 20px;
  --size-icon-base: 40px;
  --size-icon-md: 60px;
  --size-icon-lg: 100px;
  --size-icon-xl: 200px;

  --size-button-height: 40px;
  --size-button-height-sm: 28px;

  /* Module card */
  --size-module-card-min-height: 320px;

  /* ==================== LAYOUT ==================== */

  /* Grid gaps */
  --gap-grid-sm: 1rem;
  --gap-grid-base: 1.5rem;
  --gap-grid-lg: 2rem;

  /* Backdrop blur */
  --blur-backdrop: 4px;

  /* ==================== BREAKPOINTS ==================== */
  /* Note: Use in media queries as raw values, not CSS custom properties */
  /* --breakpoint-sm: 640px;  */
  /* --breakpoint-md: 768px;  */
  /* --breakpoint-lg: 1024px; */
  /* --breakpoint-xl: 1200px; */
  /* --breakpoint-2xl: 1600px; */

  /* ==================== GRADIENTS (Simplified - Light Theme) ==================== */

  --gradient-bg-primary: var(--white-pure);
  --gradient-bg-secondary: var(--gray-50);
  --gradient-radial-ambient: none;
  --gradient-radial-glow: none;
  --gradient-text-primary: var(--color-text-primary);
  --gradient-loading-bar: linear-gradient(90deg, var(--gray-300) 0%, var(--gray-200) 50%, var(--gray-300) 100%);
  --gradient-danger: var(--red-600);

  /* SVG gradients (for inline use) */
  --gradient-logo-stop-1: rgba(255, 255, 255, 0.8);
  --gradient-logo-stop-2: rgba(255, 255, 255, 0.4);

  /* ==================== PATTERNS (Removed for Clean Light Theme) ==================== */

  --pattern-conic-primary: none;
  --pattern-size-primary: 0;
  --pattern-opacity: 0;

  /* ==================== LEGACY COMPATIBILITY ALIASES ==================== */
  /* These aliases map old variable names to new theme tokens for backward compatibility */
  /* Phase out over time as files are updated to use modern token names */

  /* Color Aliases */
  --color-bg: var(--white-pure);
  --color-surface: var(--white-pure);
  --color-canvas-bg: var(--gray-100);
  --color-accent: var(--brand-indigo-500);
  --color-accent-hover: var(--brand-blue-500);
  --color-dark: var(--gray-900);
  --color-light: var(--white-pure);
  --color-gray-light: var(--gray-100);
  --color-gray-medium: var(--gray-300);
  --color-gray-dark: var(--gray-500);
  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-success: var(--brand-emerald-500);
  --color-success-hover: var(--brand-emerald-500);
  --color-warning: var(--brand-amber-500);
  --color-error: var(--red-600);
  --color-error-bar: var(--red-800);
  --color-focus: var(--blue-600);
  --color-crop: var(--red-600);
  --color-crop-hover: var(--red-700);
  --color-drop-indicator: var(--red-600);
  --color-selected-bg: var(--gray-100);
  --color-panel-bg: var(--white-pure);
  --color-edit-outline: var(--red-600);
  --color-selected-border: var(--blue-600);
  --color-transparent: rgba(0, 0, 0, 0);

  /* Shadow Aliases - Map legacy flat design to modern shadows */
  --shadow-raised-sm: var(--shadow-sm);
  --shadow-raised: var(--shadow-base);
  --shadow-raised-lg: var(--shadow-lg);
  --shadow-raised-xl: var(--shadow-xl);
  --shadow-pressed: none; /* Flat design: pressed state has no shadow */
  --shadow-pressed-lg: none;
  --shadow-hover: var(--shadow-md);
  --shadow-float: var(--shadow-lg);
  --shadow-float-lg: var(--shadow-xl);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-canvas: var(--shadow-lg);
  --shadow-light: var(--shadow-sm);
  --shadow-dark: var(--shadow-lg);

  /* Transform Aliases */
  --transform-raised: none;
  --transform-hover: none;
  --transform-pressed: none;
  --transform-float: none;
  --transform-float-lg: none;
  --transform-scale: scale(1.2);
  --transform-rotate-drag: rotate(2deg);
  --transform-drag: scale(1.02);

  /* Border Aliases */
  --border-color: var(--gray-200);
  --border-color-dark: var(--gray-400);
  --border-color-light: var(--gray-200);

  /* Dimension Aliases */
  --full-width: 100%;
  --full-height: 100%;
  --header-height: 72px;
  --panel-header-height: 50px;
  --canvas-bottom-height: 60px;
  --sidebar-width: 250px;
  --properties-width: 300px;
  --canvas-width: 1280px;
  --canvas-height: 720px;
  --button-height: 40px;
  --button-height-sm: 32px;
  --layer-control-size: 40px;
  --icon-size: 16px;
  --icon-size-md: 20px;
  --icon-preview-size: calc(var(--icon-size) * 1.5);
  --resize-handle-size: 12px;
  --resize-handle-hover-size: 14px;
  --crop-handle-size: 16px;
  --crop-handle-length: 60px;

  /* Typography Aliases */
  --font-family: var(--font-family-base);
  --line-height-base: var(--line-height-normal);

  /* Transition Aliases */
  --transition-speed: var(--duration-base);
  --transition-ease: var(--ease-out);
  --transition-canvas-zoom: var(--duration-slow);
  --transition-canvas-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-spin: 1s linear infinite;
  --duration-reduced: 0.01ms;

  /* Z-Index Aliases */
  --z-logo: 10;
  --z-element: 1;
  --z-element-selected: 50;
  --z-element-editing: 100;
  --z-resize-handle: 100;
  --z-crop-overlay: 2;
  --z-crop-handle: 102;
  --z-modal: 1000;
  --z-loading: 9999;
  --z-medium-editor-toolbar: 9999;
  --z-notification: 10000;
  --z-error-bar: 99999;
  --z-overlay: 99999;

  /* Opacity Aliases */
  --opacity-placeholder: 0.6;
  --opacity-disabled: 0.5;
  --opacity-overlay: 0.85;
  --opacity-overlay-dark: 0.5;

  /* Misc Aliases */
  --canvas-initial-scale: 1.5;
  --focus-outline: 2px solid var(--color-focus);
  --white-overlay-focus: rgba(255, 255, 255, 0.3);
  --white-overlay-focus-padding: 8px;
  --white-overlay-light: rgba(255, 255, 255, 0.1);
  --white-overlay-medium: rgba(255, 255, 255, 0.2);
  --drop-indicator-color: var(--color-drop-indicator);
  --drop-indicator-glow: rgba(255, 68, 68, 0.3);
  --accent-focus-shadow: rgba(34, 81, 197, 0.2);

  /* Modal Aliases */
  --modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --modal-bg: var(--gray-100);
  --modal-header-bg: var(--gray-100);
  --modal-border-color: var(--gray-300);
  --modal-title-color: var(--gray-800);
  --modal-close-color: var(--gray-500);
  --modal-close-hover-color: var(--red-600);
  --modal-shadow: var(--shadow-xl);
  --modal-radius: var(--radius-md);
  --modal-title-font-size: var(--font-size-xl);
  --modal-overlay-padding: var(--space-5);
  --modal-overlay-padding-sm: var(--space-2);
  --modal-base-width: 90%;
  --modal-base-max-width: 500px;
  --modal-base-max-height: 90vh;

  /* Grid Aliases */
  --grid-gap-sm: var(--space-2);
  --grid-gap-base: var(--space-3);
  --grid-gap-lg: var(--space-4);

  /* Color Picker */
  --color-input-padding: 2px;
  --color-input-swatch-padding: 2px;
  --color-picker-width: 50px;

  /* Alignment Icon Dimensions */
  --align-icon-size: 18px;
  --align-icon-margin: 7px;
  --align-bar-offset-sm: 2px;
  --align-bar-offset-md: 8px;
  --align-bar-offset-lg: 14px;
  --align-bar-width-sm: 9px;
  --align-bar-width-md: 12px;
  --align-bar-width-lg: 14px;
  --align-bar-width-full: 18px;
  --align-bar-height: 2px;

  /* Logo */
  --logo-max-height: 98px;
  --logo-margin-top: 25px;
  --logo-margin-adjustment: -18px;
  --logo-padding-left: 10px;

  /* Zoom Level */
  --zoom-level-min-width: 60px;

  /* Tab Button */
  --tab-button-margin: 4px;

  /* Grab Handle */
  --grab-handle-margin-right: 4px;

  /* Responsive */
  --responsive-canvas-height: 50vh;
  --responsive-sidebar-width: 200px;
  --responsive-properties-width: 250px;
  --responsive-modal-width-sm: 95vw;
  --responsive-modal-min-width-sm: 300px;
  --responsive-modal-padding-sm: 10px;
}

/* ==================== DARK THEME ==================== */
/* Override light theme defaults when dark theme is active */
html[data-theme="dark"] {
  /* Dark backgrounds */
  --color-bg-primary: var(--black-soft);
  --color-bg-secondary: var(--black-elevated);
  --color-bg-tertiary: var(--black-elevated-2);
  --gradient-bg-primary: var(--black-soft);
  --gradient-bg-secondary: var(--black-elevated);

  /* Light text on dark backgrounds */
  --color-text-primary: var(--white-90);
  --color-text-secondary: var(--white-70);
  --color-text-tertiary: var(--white-50);
  --color-text-muted: var(--white-40);

  /* Dark theme borders */
  --color-border-primary: var(--white-10);
  --color-border-hover: var(--white-20);

  /* Dark theme interactive */
  --color-hover-bg: var(--white-05);

  /* Gradients for dark theme depth */
  --gradient-radial-ambient: radial-gradient(
    circle at 50% 0%,
    color-mix(in srgb, var(--brand-indigo-500) 10%, transparent) 0%,
    transparent 50%
  );
  --gradient-text-primary: linear-gradient(135deg, var(--white-90) 0%, var(--white-70) 100%);
  --gradient-radial-glow: radial-gradient(
    circle,
    color-mix(in srgb, var(--brand-indigo-500) 30%, transparent) 0%,
    transparent 70%
  );
  --gradient-loading-bar: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-indigo-500) 80%, transparent) 0%,
    color-mix(in srgb, var(--brand-blue-500) 80%, transparent) 50%,
    color-mix(in srgb, var(--brand-indigo-500) 80%, transparent) 100%
  );

  /* Dark theme shadows for glows */
  --shadow-glow-sm: 0 0 20px color-mix(in srgb, var(--brand-indigo-500) 30%, transparent);
  --shadow-glow-md: 0 0 40px color-mix(in srgb, var(--brand-indigo-500) 40%, transparent);
}