/**
 * ShadowReader - CSS Custom Properties
 * Gothic color palette and spacing system
 */

:root {
  /* ===== Colors ===== */
  --color-black: #000000;
  --color-purple-deep: #2D1B4E;
  --color-brown-dark: #1A0F0F;
  --color-orange-candle: #FF8C42;
  --color-parchment: #E8DCC4;
  --color-parchment-dark: #C4B89A;
  
  /* Color variations */
  --color-purple-light: #4A2F6E;
  --color-brown-medium: #2A1515;
  --color-orange-glow: #FFB366;
  --color-parchment-light: #F5EDD8;
  
  /* Semantic colors */
  --color-background: var(--color-brown-dark);
  --color-surface: var(--color-purple-deep);
  --color-text-primary: var(--color-parchment);
  --color-text-secondary: var(--color-parchment-dark);
  --color-accent: var(--color-orange-candle);
  --color-accent-hover: var(--color-orange-glow);
  
  /* ===== Typography ===== */
  --font-gothic: "UnifrakturMaguntia", "Cinzel", "Crimson Text", Georgia, serif;
  --font-handwritten: "Shadows Into Light", "Dancing Script", cursive;
  --font-body: "Crimson Text", Georgia, serif;
  
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-2xl: 40px;
  --font-size-xxl: 48px;
  
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.8;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* ===== Spacing ===== */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5);  /* 4px */
  --spacing-sm: var(--spacing-unit);              /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 2);    /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);    /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);    /* 32px */
  --spacing-xxl: calc(var(--spacing-unit) * 6);   /* 48px */
  --spacing-xxxl: calc(var(--spacing-unit) * 8);  /* 64px */
  
  /* ===== Effects ===== */
  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-medium: 0 6px 30px rgba(0, 0, 0, 0.6);
  --shadow-deep: 0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-intense: 0 12px 60px rgba(0, 0, 0, 0.8);
  
  /* Glows */
  --glow-candle: 0 0 10px var(--color-orange-candle);
  --glow-candle-medium: 0 0 15px var(--color-orange-candle);
  --glow-candle-intense: 0 0 20px var(--color-orange-candle), 0 0 30px var(--color-orange-glow);
  --glow-ethereal: 0 0 8px rgba(255, 140, 66, 0.6);
  --glow-purple: 0 0 12px rgba(45, 27, 78, 0.8);
  
  /* Borders */
  --border-thin: 1px solid var(--color-parchment-dark);
  --border-medium: 2px solid var(--color-parchment-dark);
  --border-thick: 3px solid var(--color-parchment);
  --border-ornate: 2px solid var(--color-orange-candle);
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;
  
  /* ===== Animations ===== */
  --duration-instant: 0.1s;
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
  --duration-slowest: 1s;
  
  --easing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --easing-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Settings-controlled animations */
  --page-flip-duration: 0.5s;
  --effects-intensity: 1.0;
  
  /* ===== Z-Index Layers ===== */
  --z-base: 1;
  --z-content: 10;
  --z-header: 100;
  --z-sidebar: 200;
  --z-assistant: 300;
  --z-modal: 400;
  --z-effects: 500;
  --z-tooltip: 600;
  
  /* ===== Layout ===== */
  --header-height: 80px;
  --sidebar-width: 350px;
  --sidebar-width-mobile: 280px;
  --max-content-width: 1400px;
  
  /* ===== Breakpoints (for reference in JS) ===== */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;
  
  /* ===== Opacity ===== */
  --opacity-ghost: 0.15;
  --opacity-fog: 0.3;
  --opacity-overlay: 0.8;
  --opacity-disabled: 0.5;
  
  /* ===== Transitions ===== */
  --transition-all: all var(--duration-normal) var(--easing-smooth);
  --transition-color: color var(--duration-fast) var(--easing-smooth);
  --transition-transform: transform var(--duration-normal) var(--easing-smooth);
  --transition-opacity: opacity var(--duration-normal) var(--easing-smooth);
}

/* ===== Theme Variations ===== */
[data-theme="midnight"] {
  --color-background: #0A0A1A;
  --color-surface: #1A1A3E;
  --color-accent: #6B8EFF;
  --color-accent-hover: #8BA8FF;
}

[data-theme="crimson"] {
  --color-background: #1A0505;
  --color-surface: #3E1A1A;
  --color-accent: #FF4242;
  --color-accent-hover: #FF6B6B;
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0s;
    --duration-fast: 0s;
    --duration-normal: 0s;
    --duration-slow: 0s;
    --duration-slower: 0s;
    --duration-slowest: 0s;
  }
}