/*
 * theme.css
 * All design tokens and color variables (dark/light mode)
 * Merged from: variables.css + theme.css + admin-variables.css
 */

/* ============================
   1. Design Tokens (spacing, radius, font, shadow, etc.)
   ============================ */

:root {
  /* === TYPOGRAPHY === */

  /* Font families */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Outfit', 'Pretendard', system-ui, sans-serif;
  --font-logo: 'Good Timing', 'Outfit', system-ui, sans-serif;

  /* Font sizes */
  --text-xs: 0.875rem;    /* 14px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  /* Font weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* === SPACING === */
  --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 */
  --space-32: 8rem;     /* 128px */

  /* === ACCENT COLORS (Gold/Bronze) === */
  --accent-50: #FEF9EF;
  --accent-100: #FDF3DC;
  --accent-200: #FAE7B9;
  --accent-300: #F7DB96;
  --accent-400: #D4A853;  /* Primary accent */
  --accent-500: #C99A4A;
  --accent-600: #B88B42;
  --accent-700: #9F7639;
  --accent-800: #806030;
  --accent-900: #403014;

  /* === SURFACE COLORS (Dark backgrounds) === */
  --surface-950: #050505;
  --surface-900: #0a0a0a;
  --surface-850: #0f0f0f;
  --surface-800: #151515;
  --surface-700: #1a1a1a;
  --surface-600: #222222;

  /* === BORDER RADIUS === */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 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.2, 1);

  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;

  /* === CONTAINER === */
  --container-max: 80rem;      /* 1280px */
  --container-px: 1.5rem;      /* 24px */
  --container-px-lg: 2.5rem;   /* 40px */

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

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

/* ============================
   2. Dark Mode (default)
   ============================ */

:root {
  /* Backgrounds */
  --bg-primary: #050505;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #0f0f0f;

  /* Text colors */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-dim: #52525b;
  --text-faint: #3f3f46;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.14);
  --border-medium: rgba(255, 255, 255, 0.18);

  /* Glass effects */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.10);

  /* Bezel effects (for hero sections) */
  --bezel-bg: rgba(255, 255, 255, 0.07);
  --bezel-border: rgba(255, 255, 255, 0.12);
  --bezel-core-bg: rgba(255, 255, 255, 0.04);
  --bezel-core-shadow: rgba(255, 255, 255, 0.15);

  /* Navigation (scrolled state) */
  --nav-scrolled-bg: rgba(5, 5, 5, 0.88);
  --nav-scrolled-border: rgba(255, 255, 255, 0.08);
  --nav-scrolled-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);

  /* Form inputs */
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.10);
  --input-border-focus: rgba(212, 168, 83, 0.4);

  /* Effects */
  --noise-opacity: 0.025;

  /* Overlays */
  --card-overlay: linear-gradient(to top, #050505, rgba(5, 5, 5, 0.3), transparent);

  /* Mesh gradient opacity */
  --mesh-opacity: 1;
}

/* ============================
   3. Light Mode
   ============================ */

html.light {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f0f0f0;

  /* Text colors */
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #777777;
  --text-dim: #999999;
  --text-faint: #cccccc;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-light: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.12);

  /* Glass effects */
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-bg-hover: rgba(0, 0, 0, 0.04);
  --glass-border: rgba(0, 0, 0, 0.06);

  /* Bezel effects */
  --bezel-bg: rgba(0, 0, 0, 0.03);
  --bezel-border: rgba(0, 0, 0, 0.07);
  --bezel-core-bg: rgba(0, 0, 0, 0.015);
  --bezel-core-shadow: rgba(0, 0, 0, 0.06);

  /* Navigation (scrolled state) */
  --nav-scrolled-bg: rgba(255, 255, 255, 0.88);
  --nav-scrolled-border: rgba(0, 0, 0, 0.06);
  --nav-scrolled-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);

  /* Form inputs */
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.08);
  --input-border-focus: rgba(212, 168, 83, 0.6);

  /* Effects */
  --noise-opacity: 0.015;

  /* Overlays */
  --card-overlay: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.3), transparent);

  /* Mesh gradient opacity */
  --mesh-opacity: 0.4;
}

/* ============================
   4. Light Mode Overrides (utility class swaps)
   ============================ */

/* Surface color swaps */
html.light .bg-surface-950 {
  background-color: #ffffff;
}

html.light .bg-surface-900 {
  background-color: #fafafa;
}

html.light .bg-surface-850 {
  background-color: #f5f5f5;
}

html.light .bg-surface-800 {
  background-color: #f0f0f0;
}

/* Text color swaps */
html.light .text-white {
  color: #111111;
}

html.light .text-zinc-100 {
  color: #333333;
}

html.light .text-zinc-200 {
  color: #444444;
}

html.light .text-zinc-400 {
  color: #666666;
}

html.light .text-zinc-500 {
  color: #888888;
}

html.light .text-zinc-600 {
  color: #555555;
}

/* Border swaps */
html.light .border-white\/5,
html.light .border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08);
}

html.light .border-zinc-800 {
  border-color: #e0e0e0;
}

/* Gradient text adjustments for light mode */
html.light .gradient-text-gold {
  background-image: linear-gradient(135deg, #C99A4A, #D4A853, #F7DB96);
}

html.light .gradient-text-silver {
  background-image: linear-gradient(135deg, #666666, #888888, #aaaaaa);
}

/* Shadow adjustments */
html.light .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

html.light .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06);
}

/* ============================
   5. Admin Variables (dark mode)
   ============================ */

:root {
  /* Sidebar - same as client dashboard */
  --sidebar-width: 230px;
  --sidebar-collapsed-width: 56px;
  --sidebar-bg: #0a0a0a;
  --sidebar-border: rgba(255, 255, 255, 0.10);
  --sidebar-item-hover: rgba(255, 255, 255, 0.07);
  --sidebar-item-active-bg: rgba(96, 165, 250, 0.10);
  --sidebar-item-active-border: #60a5fa;
  --sidebar-section-spacing: 2rem;

  /* Topbar */
  --topbar-height: 48px;
  --topbar-bg: rgba(5, 5, 5, 0.88);
  --topbar-border: rgba(255, 255, 255, 0.10);
  --topbar-blur: 12px;

  /* Admin accent (blue instead of gold) */
  --admin-accent: #60a5fa;
  --admin-accent-bg: rgba(96, 165, 250, 0.10);
  --admin-accent-hover: #3b82f6;
  --admin-accent-dark: #3b82f6;

  /* Semantic color aliases */
  --admin-success: #34d399;
  --admin-warning: #fbbf24;
  --admin-info: #60a5fa;
  --admin-danger: #f87171;

  /* Background aliases (reference shared theme vars) */
  --admin-bg: var(--bg-primary);
  --admin-bg-card: var(--dash-card-bg);
  --admin-card-bg: var(--dash-card-bg);
  --admin-bg-hover: var(--glass-bg-hover);
  --admin-hover-bg: var(--glass-bg-hover);

  /* Text aliases */
  --admin-text: var(--text-primary);
  --admin-text-secondary: var(--text-secondary);
  --admin-text-muted: var(--text-muted);

  /* Border aliases */
  --admin-border: var(--dash-card-border);
  --admin-border-hover: var(--dash-card-hover-border);
  --input-border: rgba(255, 255, 255, 0.18);
  --admin-border-radius: var(--radius-xl);

  /* Radius aliases */
  --admin-radius: var(--radius-xl);
  --admin-radius-lg: var(--radius-2xl);
  --admin-radius-sm: var(--radius-lg);

  /* Shadow aliases */
  --admin-shadow: var(--shadow-lg);
  --admin-shadow-sm: var(--shadow-sm);

  /* Easing alias */
  --admin-ease: var(--ease-spring);

  /* Status colors (same as client) */
  --status-active: #34d399;
  --status-active-bg: rgba(52, 211, 153, 0.08);
  --status-active-border: rgba(52, 211, 153, 0.15);
  --status-completed: #60a5fa;
  --status-completed-bg: rgba(96, 165, 250, 0.08);
  --status-completed-border: rgba(96, 165, 250, 0.15);
  --status-pending: #fbbf24;
  --status-pending-bg: rgba(251, 191, 36, 0.08);
  --status-pending-border: rgba(251, 191, 36, 0.15);
  --status-overdue: #f87171;
  --status-overdue-bg: rgba(248, 113, 113, 0.08);
  --status-overdue-border: rgba(248, 113, 113, 0.15);
  --status-paused: #a78bfa;
  --status-paused-bg: rgba(167, 139, 250, 0.08);
  --status-paused-border: rgba(167, 139, 250, 0.15);
  --status-inactive: #71717a;
  --status-inactive-bg: rgba(113, 113, 122, 0.08);
  --status-inactive-border: rgba(113, 113, 122, 0.15);

  /* Payment status */
  --payment-paid: #34d399;
  --payment-paid-bg: rgba(52, 211, 153, 0.08);
  --payment-partial: #fbbf24;
  --payment-partial-bg: rgba(251, 191, 36, 0.08);
  --payment-unpaid: #f87171;
  --payment-unpaid-bg: rgba(248, 113, 113, 0.08);

  /* Calendar event types */
  --cal-meeting: #60a5fa;
  --cal-meeting-bg: rgba(96, 165, 250, 0.10);
  --cal-deadline: #f87171;
  --cal-deadline-bg: rgba(248, 113, 113, 0.10);
  --cal-milestone: #34d399;
  --cal-milestone-bg: rgba(52, 211, 153, 0.10);
  --cal-review: #a78bfa;
  --cal-review-bg: rgba(167, 139, 250, 0.10);

  /* Priority */
  --priority-high: #f87171;
  --priority-high-bg: rgba(248, 113, 113, 0.08);
  --priority-medium: #fbbf24;
  --priority-medium-bg: rgba(251, 191, 36, 0.08);
  --priority-low: #60a5fa;
  --priority-low-bg: rgba(96, 165, 250, 0.08);

  /* Dashboard cards */
  --dash-card-bg: rgba(255, 255, 255, 0.06);
  --dash-card-border: rgba(255, 255, 255, 0.10);
  --dash-card-hover-bg: rgba(255, 255, 255, 0.09);
  --dash-card-hover-border: rgba(255, 255, 255, 0.14);

  /* Messages */
  --msg-sent-bg: rgba(96, 165, 250, 0.12);
  --msg-sent-border: rgba(96, 165, 250, 0.2);
  --msg-received-bg: rgba(255, 255, 255, 0.07);
  --msg-received-border: rgba(255, 255, 255, 0.10);

  /* File types */
  --file-pdf: #ef4444;
  --file-doc: #3b82f6;
  --file-img: #a855f7;
  --file-zip: #f59e0b;
  --file-figma: #ec4899;
  --file-psd: #06b6d4;
  --file-code: #10b981;
  --file-video: #8b5cf6;
  --file-default: #6b7280;

  /* Notifications */
  --notification-unread-dot: #ef4444;
  --notification-unread-bg: rgba(239, 68, 68, 0.08);

  /* Chart colors */
  --chart-primary: #60a5fa;
  --chart-secondary: #34d399;
  --chart-tertiary: #a78bfa;
  --chart-quaternary: #fbbf24;
  --chart-quinary: #f87171;
  --chart-senary: #ec4899;
  --chart-grid: rgba(255, 255, 255, 0.07);

  /* Table */
  --table-header-bg: rgba(255, 255, 255, 0.04);
  --table-row-hover: rgba(255, 255, 255, 0.06);
  --table-border: rgba(255, 255, 255, 0.07);
  --table-stripe: rgba(255, 255, 255, 0.03);
}

/* ============================
   6. Admin Light Mode Overrides
   ============================ */

html.light {
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-item-hover: rgba(0, 0, 0, 0.03);
  --sidebar-item-active-bg: rgba(96, 165, 250, 0.08);
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --topbar-border: rgba(0, 0, 0, 0.06);
  --admin-accent-bg: rgba(96, 165, 250, 0.08);
  --dash-card-bg: rgba(0, 0, 0, 0.02);
  --dash-card-border: rgba(0, 0, 0, 0.06);
  --input-border: rgba(0, 0, 0, 0.18);
  --dash-card-hover-bg: rgba(0, 0, 0, 0.04);
  --dash-card-hover-border: rgba(0, 0, 0, 0.08);
  --msg-sent-bg: rgba(96, 165, 250, 0.1);
  --msg-sent-border: rgba(96, 165, 250, 0.25);
  --msg-received-bg: rgba(0, 0, 0, 0.03);
  --msg-received-border: rgba(0, 0, 0, 0.06);
  --chart-grid: rgba(0, 0, 0, 0.04);
  --table-header-bg: rgba(0, 0, 0, 0.02);
  --table-row-hover: rgba(0, 0, 0, 0.02);
  --table-border: rgba(0, 0, 0, 0.06);
  --table-stripe: rgba(0, 0, 0, 0.015);
}