/* Design Tokens - CSS Custom Properties */
/* Zerg/Swarmlet Design System */

:root {
  /* ========================================
     COLOR TOKENS - VOID THEME
     ======================================== */

  /* Void Backgrounds - Deep layered darks */
  --color-void: #030305;
  --color-void-light: #0a0a12;
  --color-surface-page: #030305;
  --color-surface-section: #0d0d14;
  --color-surface-card: #141420;
  --color-surface-elevated: #1c1c2a;

  /* Glass Surfaces */
  --color-glass-bg: rgba(20, 20, 30, 0.6);
  --color-glass-light: rgba(255, 255, 255, 0.03);
  --color-glass-elevated: rgba(255, 255, 255, 0.07);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-glass-border-bright: rgba(255, 255, 255, 0.12);
  --color-glass-inset: rgba(255, 255, 255, 0.05);

  /* Neon Accent Palette */
  --color-neon-indigo: #6366f1;
  --color-neon-indigo-hover: #4f46e5;
  --color-neon-indigo-muted: rgba(99, 102, 241, 0.15);
  --color-neon-cyan: #06b6d4;
  --color-neon-cyan-muted: rgba(6, 182, 212, 0.15);
  --color-neon-pink: #ec4899;
  --color-neon-purple: #a855f7;

  /* Text Hierarchy */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;

  /* Win98 Core Palette - Keep for backward compatibility */
  --color-win98-face: #C3C3C3;
  --color-win98-shadow: #818181;
  --color-win98-darkshadow: #000000;
  --color-win98-highlight: #FDFFFF;
  --color-win98-light: #DFDFDF;
  --color-win98-accent: #000080;
  --color-win98-white: #FFFFFF;
  --color-win98-black: #000000;
  --color-win98-scrollbar: #C3C3C3;
  --color-win98-button-face: #C3C3C3;
  --color-win98-menu-highlight: #0000FF;
  --color-win98-inactive-title: #7F7F7F;
  --color-win98-inactive-border: #C3C3C3;
  --color-win98-desktop: #008080;

  /* Task Manager Style */
  --color-taskman-bg: #000000;
  --color-taskman-green: #00FF00;
  --color-taskman-text: #00FF00;

  /* Status Colors */
  --color-status-good: #00FF00;
  --color-status-warning: #FFFF00;
  --color-status-error: #FF0000;

  /* Link Colors */
  --color-link-default: #000080;
  --color-link-visited: #800080;
  --color-link-hover: #FF0000;

  /* Admin UI Colors */
  --color-admin-bg: #f5f5f5;
  --color-admin-text: #1d1d1f;
  --color-admin-card-bg: #ffffff;
  --color-admin-primary: #0066cc;
  --color-admin-primary-hover: #0055aa;
  --color-admin-secondary: #666;
  --color-admin-border: #ddd;
  --color-admin-error-bg: #ffebee;
  --color-admin-error-text: #c62828;
  --color-admin-success-bg: #e8f5e9;
  --color-admin-success-text: #2e7d32;
  --color-admin-delete: #ff4444;
  --color-admin-delete-hover: #cc0000;
  --color-admin-delete-active: #aa0000;
  --color-admin-badge: #ff4444;
  --color-admin-visitor-bg: #e8f4f8;
  --color-admin-david-bg: #f0f0f0;
  --color-admin-author: #0066cc;
  --color-admin-meta: #666;
  --color-admin-time: #999;
  --color-admin-connection-connected: #4caf50;
  --color-admin-connection-connecting: #ff9800;
  --color-admin-connection-disconnected: #f44336;
  --color-admin-tab-border: rgba(0, 0, 0, 0.15);
  --color-admin-tab-shadow: rgba(0, 0, 0, 0.08);
  --color-admin-tab-active-border: #0055aa;

  /* Blog Colors */
  --color-blog-bg: #f1f1f1;
  --color-blog-text: #1d1d1f;
  --color-blog-card-bg: #ffffff;
  --color-blog-card-border: rgba(0, 0, 0, 0.08);
  --color-blog-card-shadow: rgba(0, 0, 0, 0.05);
  --color-blog-card-shadow-hover: rgba(0, 0, 0, 0.08);
  --color-blog-meta: #666;
  --color-blog-subtitle: #555;
  --color-blog-body-text: #202124;
  --color-blog-code-bg: #edf2ff;
  --color-blog-code-block-bg: #0f172a;
  --color-blog-code-block-text: #f8fafc;
  --color-blog-tag-bg: #eef2ff;
  --color-blog-tag-text: #3730a3;
  --color-blog-blockquote-border: #6366f1;
  --color-blog-blockquote-bg: #f5f7ff;
  --color-blog-blockquote-text: #1f2937;
  --color-blog-back-link: #555;
  --color-blog-back-link-hover: #111;
  --color-blog-editor-stats-bg: #f6f9ff;
  --color-blog-editor-card-bg: #fafafa;
  --color-blog-editor-preview-bg: #f8fafc;
  --color-blog-editor-preview-header: #475569;
  --color-blog-editor-preview-empty: #64748b;
  --color-blog-status-published: #2e7d32;
  --color-blog-status-draft: #ff6f00;

  /* Syntax Highlighting Colors */
  --color-hljs-comment: #94a3b8;
  --color-hljs-keyword: #38bdf8;
  --color-hljs-string: #22c55e;
  --color-hljs-builtin: #facc15;

  /* ========================================
     SPACING TOKENS
     ======================================== */

  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 60px;

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

  /* Font Families */
  --font-system: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-win98: "MS Sans Serif", "Tahoma", system-ui, sans-serif;
  --font-monospace: 'JetBrains Mono', "Courier New", monospace;
  --font-code: 'JetBrains Mono', 'Menlo', 'Fira Code', monospace;
  --font-code-editor: 'Menlo', 'SFMono-Regular', monospace;

  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 24px;
  --font-size-4xl: 26px;
  --font-size-5xl: 28px;
  --font-size-6xl: 30px;
  --font-size-7xl: 32px;
  --font-size-8xl: 52px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;
  --line-height-comfortable: 1.55;
  --line-height-loose: 1.6;
  --line-height-spacious: 1.7;

  /* ========================================
     BORDER TOKENS
     ======================================== */

  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-default: 2px;
  --border-width-thick: 4px;

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-pill: 9999px;

  /* ========================================
     SHADOW TOKENS
     ======================================== */

  /* Glow Effects - Neon Accents */
  --shadow-glow-indigo: 0 0 20px rgba(99, 102, 241, 0.35);
  --shadow-glow-indigo-strong: 0 0 30px rgba(99, 102, 241, 0.5);
  --shadow-glow-indigo-subtle: 0 0 12px rgba(99, 102, 241, 0.2);
  --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.35);
  --shadow-glow-pink: 0 0 20px rgba(236, 72, 153, 0.35);
  --shadow-glow-purple: 0 0 20px rgba(168, 85, 247, 0.35);

  /* Card & Surface Shadows */
  --shadow-glass-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glass-card-hover: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.15);
  --shadow-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-depth-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-depth-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-depth-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

  --shadow-win98-window: 4px 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-admin-card: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-admin-card-elevated: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-admin-tab: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-blog-card: 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-blog-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-blog-post: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* ========================================
     MOTION TOKENS
     ======================================== */

  /* Motion Durations */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Motion Easing */
  --timing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --timing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --timing-ease: ease;
  --timing-ease-in: ease-in;
  --timing-ease-out: ease-out;
  --timing-ease-in-out: ease-in-out;

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

  /* Max Widths */
  --max-width-content: 1000px;
  --max-width-blog: 920px;
  --max-width-admin: 1200px;
  --max-width-blog-sidebar: 360px;

  /* Z-Index Layers */
  --z-index-base: 1;
  --z-index-elevated: 10;
  --z-index-overlay: 100;
  --z-index-modal: 1000;

  /* ========================================
     SIZING TOKENS
     ======================================== */

  /* Icon Sizes */
  --size-icon-sm: 10px;
  --size-icon-md: 64px;

  /* Scrollbar */
  --size-scrollbar: 16px;

  /* Heights */
  --height-code-container: calc(10em + 24px);
  --height-code-container-min: calc(10em + 20px);
  --height-blog-posts-list-max: 320px;
  --height-blog-preview-max: 480px;
}