/* css/variables.css */
/* Shared CSS variables for the entire application */

:root {
  /* ======================================
     PRIMARY COLORS
     ====================================== */
  --primary: #1a1a1a;
  --primary-light: #2a2a2a;
  --primary-dark: #0f0f0f;

  /* ======================================
     ACCENT COLORS
     ====================================== */
  --accent: #c8956c;
  --accent-dark: #a97a55;
  --accent-soft: #f5e6d8;
  --accent-glow: rgba(200, 149, 108, 0.15);
  --accent-muted: #d4a574;

  /* ======================================
     BACKGROUNDS
     ====================================== */
  --bg: #f6f4f1;
  --bg-elevated: rgba(255, 255, 255, 0.85);
  --card-bg: #ffffff;
  --surface: #f0ece7;
  --surface-muted: #fafafa;

  /* ======================================
     TEXT COLORS
     ====================================== */
  --text-main: #1a1a1a;
  --text-secondary: #4a4540;
  --text-muted: #8a8580;
  --text-placeholder: #c0b8b0;

  /* ======================================
     BORDERS
     ====================================== */
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(201, 148, 62, 0.25);

  /* ======================================
     SPACING
     ====================================== */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-pill: 50px;

  /* ======================================
     SHADOWS
     ====================================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1);
  --shadow-accent: 0 8px 30px rgba(200, 149, 108, 0.2);

  /* ======================================
     TRANSITIONS
     ====================================== */
  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ======================================
     SEMANTIC COLORS
     ====================================== */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* ======================================
     FONT FAMILIES
     ====================================== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Monaco', 'Courier New', monospace;

  /* ======================================
     FONT SIZES
     ====================================== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.8rem;
  --font-size-3xl: 2rem;

  /* ======================================
     LINE HEIGHTS
     ====================================== */
  --line-height-tight: 1.3;
  --line-height-normal: 1.65;
  --line-height-relaxed: 1.8;

  /* ======================================
     Z-INDEX SCALE
     ====================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-modal: 1000;
  --z-notification: 9999;

  /* ======================================
     BREAKPOINTS (for reference in media queries)
     ====================================== */
  /* --breakpoint-sm: 640px */
  /* --breakpoint-md: 768px */
  /* --breakpoint-lg: 1024px */
  /* --breakpoint-xl: 1280px */
}

/* ======================================
   REDUCED MOTION SUPPORT
   ====================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: none;
    --transition-fast: none;
    --transition-smooth: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================
   DARK MODE SUPPORT (optional)
   ====================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --bg-elevated: rgba(30, 30, 30, 0.9);
    --card-bg: #1a1a1a;
    --surface: #2a2a2a;
    --text-main: #f5f5f5;
    --text-secondary: #d0d0d0;
    --text-muted: #909090;
  }
}