/**
 * Intelekt-Trassir v3 - CSS Variables
 * Apple-inspired design system with Liquid Glass
 */

:root {
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 34px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ========================================
     SPACING
     ======================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ========================================
     LAYOUT
     ======================================== */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
  --content-max-width: 1400px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-full: 9999px;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

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

/* ========================================
   LIGHT THEME (Default)
   ======================================== */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #fafafa;
  --bg-elevated: #ffffff;

  /* Glass effects */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-solid: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-shadow: rgba(0, 0, 0, 0.04);
  --glass-blur: 20px;

  /* Text colors */
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --text-placeholder: #aeaeb2;
  --text-inverse: #ffffff;

  /* Accent colors (Apple palette) */
  --accent-blue: #007aff;
  --accent-blue-hover: #0056b3;
  --accent-green: #34c759;
  --accent-green-hover: #248a3d;
  --accent-red: #ff3b30;
  --accent-red-hover: #d70015;
  --accent-orange: #ff9500;
  --accent-orange-hover: #c93400;
  --accent-purple: #af52de;
  --accent-purple-hover: #8944ab;
  --accent-teal: #5ac8fa;
  --accent-pink: #ff2d55;
  --accent-yellow: #ffcc00;

  /* Semantic colors */
  --color-success: var(--accent-green);
  --color-warning: var(--accent-orange);
  --color-error: var(--accent-red);
  --color-info: var(--accent-blue);

  /* Borders */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-strong: rgba(0, 0, 0, 0.12);

  /* Sidebar */
  --sidebar-bg: rgba(255, 255, 255, 0.8);
  --sidebar-border: rgba(0, 0, 0, 0.06);
  --sidebar-item-hover: rgba(0, 0, 0, 0.04);
  --sidebar-item-active: rgba(0, 122, 255, 0.12);
  --sidebar-item-active-text: var(--accent-blue);

  /* Forms */
  --input-bg: rgba(0, 0, 0, 0.04);
  --input-bg-focus: #ffffff;
  --input-border: rgba(0, 0, 0, 0.08);
  --input-border-focus: var(--accent-blue);

  /* Tables */
  --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);

  /* Cards */
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --card-shadow: var(--shadow-md);

  /* Status badges */
  --badge-resident-bg: rgba(0, 122, 255, 0.12);
  --badge-resident-text: var(--accent-blue);
  --badge-guest-bg: rgba(142, 142, 147, 0.12);
  --badge-guest-text: var(--text-secondary);
  --badge-violation-bg: rgba(255, 59, 48, 0.12);
  --badge-violation-text: var(--accent-red);
  --badge-success-bg: rgba(52, 199, 89, 0.12);
  --badge-success-text: var(--accent-green);
}

/* ========================================
   DARK THEME
   ======================================== */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;
  --bg-elevated: #2c2c2e;

  /* Glass effects */
  --glass-bg: rgba(44, 44, 46, 0.72);
  --glass-bg-solid: rgba(44, 44, 46, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.32);

  /* Text colors */
  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #6e6e73;
  --text-placeholder: #48484a;
  --text-inverse: #000000;

  /* Accent colors (Dark mode optimized) */
  --accent-blue: #0a84ff;
  --accent-blue-hover: #409cff;
  --accent-green: #30d158;
  --accent-green-hover: #5de783;
  --accent-red: #ff453a;
  --accent-red-hover: #ff6961;
  --accent-orange: #ff9f0a;
  --accent-orange-hover: #ffb340;
  --accent-purple: #bf5af2;
  --accent-purple-hover: #d17ff5;
  --accent-teal: #64d2ff;
  --accent-pink: #ff375f;
  --accent-yellow: #ffd60a;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-strong: rgba(255, 255, 255, 0.16);

  /* Sidebar */
  --sidebar-bg: rgba(28, 28, 30, 0.8);
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active: rgba(10, 132, 255, 0.2);
  --sidebar-item-active-text: var(--accent-blue);

  /* Forms */
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-bg-focus: var(--bg-tertiary);
  --input-border: rgba(255, 255, 255, 0.08);
  --input-border-focus: var(--accent-blue);

  /* Tables */
  --table-header-bg: rgba(255, 255, 255, 0.04);
  --table-row-hover: rgba(255, 255, 255, 0.04);
  --table-border: rgba(255, 255, 255, 0.06);

  /* Cards */
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Status badges */
  --badge-resident-bg: rgba(10, 132, 255, 0.2);
  --badge-resident-text: var(--accent-blue);
  --badge-guest-bg: rgba(152, 152, 157, 0.2);
  --badge-guest-text: var(--text-secondary);
  --badge-violation-bg: rgba(255, 69, 58, 0.2);
  --badge-violation-text: var(--accent-red);
  --badge-success-bg: rgba(48, 209, 88, 0.2);
  --badge-success-text: var(--accent-green);

  /* Shadows for dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.48);
}

/* ========================================
   SYSTEM PREFERENCE DETECTION
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Inherit dark theme values */
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --glass-bg: rgba(44, 44, 46, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --accent-blue: #0a84ff;
    --accent-green: #30d158;
    --accent-red: #ff453a;
  }
}