/* 
 * NewReading.Club Design System v2.1
 * Design Tokens - Light & Dark Theme
 * Source: UI Kit Light & Dark (NUxGfWvz, KCZVF6Jn)
 */

/* ===================================
   LIGHT THEME (Default)
   =================================== */
:root {
  /* Primary Colors */
  --color-primary: #007BFF;
  --color-primary-hover: #0066E0;
  --color-primary-focus: #005ACC;
  
  /* Secondary Gold */
  --color-gold: #d0B48C;
  --color-gold-hover: #B89968;
  --color-gold-rgb: 208, 180, 140;
  
  /* Neutrals - Light Theme */
  --color-white: #FFFFFF;
  --color-gray-1: #FAFAFA;
  --color-gray-2: #F5F5F5;
  --color-gray-3: #E0E0E0;
  --color-gray-4: #BDBDBD;
  --color-gray-5: #9E9E9E;
  --color-gray-6: #757575;
  --color-gray-7: #616161;
  --color-gray-8: #424242;
  --color-gray-9: #212121;
  --color-black: #000000;
  
  /* Semantic Colors */
  --color-success: #29A746;
  --color-success-hover: #218838;
  --color-warning: #FFC107;
  --color-warning-hover: #E0A800;
  --color-error: #C63845;
  --color-error-hover: #A02A34;
  
  /* Background & Surface */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --bg-tertiary: #F5F5F5;
  
  /* Text Colors */
  --text-primary: #212121;
  --text-secondary: #616161;
  --text-tertiary: #9E9E9E;
  --text-disabled: #BDBDBD;
  --text-inverse: #FFFFFF;
  
  /* Border Colors */
  --border-primary: #E0E0E0;
  --border-secondary: #BDBDBD;
  --border-focus: #007BFF;
  --border-error: #C63845;
  
  /* Button Colors */
  --btn-primary-bg: #007BFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #0066E0;
  --btn-primary-focus: #005ACC;
  
  --btn-secondary-bg: #E0E0E0;
  --btn-secondary-text: #212121;
  --btn-secondary-hover: #BDBDBD;
  
  --btn-tertiary-bg: transparent;
  --btn-tertiary-text: #212121;
  --btn-tertiary-hover: #F5F5F5;
  
  --btn-destructive-bg: #C63845;
  --btn-destructive-text: #FFFFFF;
  --btn-destructive-hover: #A02A34;
  
  /* Icon Colors */
  --icon-primary: #212121;
  --icon-secondary: #616161;
  --icon-gold: #d0B48C;
  
  /* Icon Filter (for SVG stroke color) */
  --icon-filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(95%) contrast(89%);
  
  /* Focus Ring */
  --focus-ring-color: rgba(0, 123, 255, 0.3);
  --focus-ring-width: 3px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
  
  /* Logo Invert (Light theme - no invert) */
  --logo-invert: 0;
}

/* ===================================
   DARK THEME
   =================================== */
[data-theme="dark"] {
  /* Primary Colors (same as light) */
  --color-primary: #007BFF;
  --color-primary-hover: #0066E0;
  --color-primary-focus: #005ACC;
  
  /* Secondary Gold (same as light) */
  --color-gold: #d0B48C;
  --color-gold-hover: #B89968;
  --color-gold-rgb: 208, 180, 140;
  
  /* Neutrals - Dark Theme */
  --color-white: #FFFFFF;
  --color-gray-1: #1A1A1A;
  --color-gray-2: #2A2A2A;
  --color-gray-3: #3A3A3A;
  --color-gray-4: #4A4A4A;
  --color-gray-5: #6A6A6A;
  --color-gray-6: #9E9E9E;
  --color-gray-7: #BDBDBD;
  --color-gray-8: #E0E0E0;
  --color-gray-9: #F5F5F5;
  --color-black: #000000;
  
  /* Semantic Colors (adjusted for dark) */
  --color-success: #4CAF50;
  --color-success-hover: #66BB6A;
  --color-warning: #FFC107;
  --color-warning-hover: #FFD54F;
  --color-error: #F44336;
  --color-error-hover: #E57373;
  
  /* Background & Surface */
  --bg-primary: #1A1A1A;
  --bg-secondary: #2A2A2A;
  --bg-tertiary: #3A3A3A;
  
  /* Text Colors */
  --text-primary: #F5F5F5;
  --text-secondary: #BDBDBD;
  --text-tertiary: #9E9E9E;
  --text-disabled: #6A6A6A;
  --text-inverse: #212121;
  
  /* Border Colors */
  --border-primary: #3A3A3A;
  --border-secondary: #4A4A4A;
  --border-focus: #007BFF;
  --border-error: #F44336;
  
  /* Button Colors */
  --btn-primary-bg: #007BFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #0066E0;
  --btn-primary-focus: #005ACC;
  
  --btn-secondary-bg: #3A3A3A;
  --btn-secondary-text: #F5F5F5;
  --btn-secondary-hover: #4A4A4A;
  
  --btn-tertiary-bg: transparent;
  --btn-tertiary-text: #F5F5F5;
  --btn-tertiary-hover: #2A2A2A;
  
  --btn-destructive-bg: #F44336;
  --btn-destructive-text: #FFFFFF;
  --btn-destructive-hover: #E57373;
  
  /* Icon Colors */
  --icon-primary: #F5F5F5;
  --icon-secondary: #BDBDBD;
  --icon-gold: #d0B48C;
  
  /* Icon Filter (for SVG stroke color in dark mode) */
  --icon-filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(721%) hue-rotate(314deg) brightness(99%) contrast(95%);
  
  /* Focus Ring */
  --focus-ring-color: rgba(0, 123, 255, 0.5);
  --focus-ring-width: 3px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Logo Invert (Dark theme - invert logo) */
  --logo-invert: 1;
}

/* ===================================
   TYPOGRAPHY TOKENS
   =================================== */
:root {
  /* Font Families */
  --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  
  /* Font Weights */
  --font-regular: 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 TOKENS (4px base)
   =================================== */
:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
}

/* ===================================
   BORDER RADIUS TOKENS
   =================================== */
:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
}

/* ===================================
   TRANSITION TOKENS
   =================================== */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ===================================
   BASE STYLES
   =================================== */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Focus visible styles */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Remove default focus styles */
:focus:not(:focus-visible) {
  outline: none;
}