/**
 * MictoNode Widget Design System
 * Aligned with Explorer Design System (Phase 7)
 *
 * Theme: "The Data Cathedral" - Premium Blockchain Explorer
 *
 * Color Philosophy:
 * - LCH (Lightness, Chroma, Hue) for perceptual uniformity
 * - 60-30-10 Rule: 60% neutral, 30% brand, 10% accent
 * - Protected Palette: #0066ff (primary), #0f1419 (dark base)
 *
 * Token Structure:
 * - Semantic naming (not color names)
 * - Scale-based variants (50-950)
 * - LCH values for precise color manipulation
 */

:root {
  /* ==========================================================================
     LCH COLOR TOKENS
     ========================================================================== */

  /* Primary Scale - Deep Blue (#0066ff base) */
  --color-primary-50: lch(95% 15% 250deg);
  --color-primary-100: lch(90% 20% 250deg);
  --color-primary-200: lch(82% 30% 250deg);
  --color-primary-300: lch(72% 45% 250deg);
  --color-primary-400: lch(60% 60% 250deg);
  --color-primary-500: lch(52% 70% 250deg); /* #0066ff equivalent */
  --color-primary-600: lch(48% 75% 250deg);
  --color-primary-700: lch(42% 70% 250deg);
  --color-primary-800: lch(35% 60% 250deg);
  --color-primary-900: lch(28% 50% 250deg);
  --color-primary-950: lch(20% 35% 250deg);

  /* Accent Scale - Teal/Cyan for modern feel */
  --color-accent-50: lch(96% 10% 190deg);
  --color-accent-100: lch(92% 15% 190deg);
  --color-accent-200: lch(85% 25% 190deg);
  --color-accent-300: lch(78% 40% 190deg);
  --color-accent-400: lch(70% 55% 190deg);
  --color-accent-500: lch(65% 65% 190deg);
  --color-accent-600: lch(60% 70% 190deg);
  --color-accent-700: lch(52% 65% 190deg);
  --color-accent-800: lch(45% 55% 190deg);
  --color-accent-900: lch(38% 45% 190deg);
  --color-accent-950: lch(28% 30% 190deg);

  /* Neutral Scale - Cool greys for "Data Cathedral" mood */
  --color-neutral-50: lch(98% 2% 250deg);
  --color-neutral-100: lch(95% 3% 250deg);
  --color-neutral-200: lch(90% 4% 250deg);
  --color-neutral-300: lch(80% 5% 250deg);
  --color-neutral-400: lch(65% 6% 250deg);
  --color-neutral-500: lch(50% 8% 250deg);
  --color-neutral-600: lch(40% 10% 250deg);
  --color-neutral-700: lch(30% 12% 250deg);
  --color-neutral-800: lch(20% 10% 250deg);
  --color-neutral-900: lch(12% 6% 250deg);
  --color-neutral-950: lch(5% 2.4 256deg); /* Exact #0f1419 */

  /* Semantic Colors */
  --color-success: lch(65% 55% 145deg); /* #3fb68b equivalent */
  --color-warning: lch(75% 60% 45deg); /* #f59e0b equivalent */
  --color-error: lch(60% 65% 25deg); /* #ff5353 equivalent */
  --color-info: lch(60% 70% 250deg); /* #0066ff equivalent */

  /* ==========================================================================
     SEMANTIC ALIAS TOKENS
     Purpose-driven names that resolve to scale tokens above.
     Use these in components for intent, not color.
     ========================================================================== */

  /* Text */
  --color-text-brand: var(--color-primary-500);
  --color-text-muted: var(--color-neutral-400);

  /* Surface (backgrounds) */
  --color-surface: var(--color-neutral-50); /* Light mode main bg */
  --color-surface-raised: var(--color-neutral-100); /* Card/panel bg */
  --color-surface-overlay: var(--color-neutral-200); /* Modal/dropdown bg */

  /* Borders */
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);

  /* Interactive */
  --color-interactive: var(--color-primary-500);
  --color-interactive-hover: var(--color-primary-600);

  /* ==========================================================================
     SPACING TOKENS (8-Point Grid)
     ========================================================================== */
  --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-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* ==========================================================================
     RADIUS TOKENS
     ========================================================================== */
  --radius-none: 0;
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* ==========================================================================
     SHADOW TOKENS (Multi-layer for depth)
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-glow-primary: 0 0 20px lch(52% 70% 250deg / 0.3);
  --shadow-glow-accent: 0 0 20px lch(65% 65% 190deg / 0.3);

  /* ==========================================================================
     Z-INDEX LAYERS
     ========================================================================== */
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ==========================================================================
     TRANSITION TOKENS
     ========================================================================== */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Physics-based bounce */
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    /* Adjust luminance for dark mode while preserving hue/chroma */
    --color-primary-500: lch(60% 70% 250deg); /* Brighter for contrast */
    --color-accent-500: lch(70% 65% 190deg);
  }
}

/* Manual dark mode class support */
html.dark,
html[data-theme='dark'] {
  --color-primary-500: lch(60% 70% 250deg);
  --color-accent-500: lch(70% 65% 190deg);

  /* Semantic alias dark overrides */
  --color-text-brand: var(--color-primary-400); /* WCAG AA */
  --color-text-muted: var(--color-neutral-400);
  --color-surface: var(--color-neutral-950); /* #0f1419 */
  --color-surface-raised: var(--color-neutral-900); /* Card bg */
  --color-surface-overlay: var(--color-neutral-800); /* Modal bg */
  --color-border-subtle: var(--color-neutral-800);
  --color-border-default: var(--color-neutral-700);
  --color-interactive: var(--color-primary-500);
  --color-interactive-hover: var(--color-primary-400);
}