/* ═══ Society Management PWA — Design Tokens ═══ */
/* Premium dark-first design system with glassmorphism */

:root {
  /* ── Brand Colors ── */
  --brand-primary: #6C5CE7;
  --brand-primary-light: #A29BFE;
  --brand-primary-dark: #4834D4;
  --brand-accent: #00CEC9;
  --brand-accent-light: #55EFC4;
  
  /* ── Semantic Colors ── */
  --success: #00B894;
  --success-light: #55EFC4;
  --success-bg: rgba(0, 184, 148, 0.12);
  --success-soft: rgba(0, 184, 148, 0.12);
  --warning: #FDCB6E;
  --warning-light: #FFEAA7;
  --warning-bg: rgba(253, 203, 110, 0.12);
  --danger: #FF6B6B;
  --danger-light: #FF9F9F;
  --danger-bg: rgba(255, 107, 107, 0.12);
  --info: #74B9FF;
  --info-light: #A3D8FF;
  --info-bg: rgba(116, 185, 255, 0.12);
  
  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
  --gradient-accent: linear-gradient(135deg, #00CEC9 0%, #55EFC4 100%);
  --gradient-warm: linear-gradient(135deg, #FD79A8 0%, #FDCB6E 100%);
  --gradient-cool: linear-gradient(135deg, #74B9FF 0%, #A29BFE 100%);
  --gradient-dark: linear-gradient(135deg, #2D3436 0%, #636E72 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  
  /* ── Typography ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  --fs-xs: 0.6875rem;   /* 11px */
  --fs-sm: 0.75rem;     /* 12px */
  --fs-base: 0.875rem;  /* 14px */
  --fs-md: 1rem;        /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  
  /* ── Spacing ── */
  --sp-1: 0.25rem;  /* 4px */
  --sp-2: 0.5rem;   /* 8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.25rem;  /* 20px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-10: 2.5rem;  /* 40px */
  --sp-12: 3rem;    /* 48px */
  --sp-16: 4rem;    /* 64px */
  
  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  
  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.2);
  --shadow-glow-primary: 0 0 20px rgba(108, 92, 231, 0.4);
  --shadow-glow-accent: 0 0 20px rgba(0, 206, 201, 0.4);
  --shadow-glow-danger: 0 0 20px rgba(255, 107, 107, 0.4);
  
  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  
  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  
  /* ── Layout ── */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 60px;
  --bottom-nav-height: 64px;
  --content-max-width: 1200px;
}

/* ═══ DARK THEME (Default) ═══ */
[data-theme="dark"] {
  --bg-primary: #0F0F14;
  --bg-secondary: #1A1A24;
  --bg-tertiary: #22222E;
  --bg-elevated: #2A2A38;
  --bg-hover: #32323F;
  --bg-active: #3A3A4A;
  
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-hover: rgba(255, 255, 255, 0.07);
  --surface-glass-border: rgba(255, 255, 255, 0.08);
  
  --text-primary: #F1F1F5;
  --text-secondary: #A0A0B8;
  --text-tertiary: #6B6B80;
  --text-disabled: #4A4A5C;
  --text-inverse: #0F0F14;
  
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.05);
  --border-focus: var(--brand-primary);
  
  --input-bg: #1A1A24;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus-border: var(--brand-primary);
  --input-placeholder: #6B6B80;
  
  --scrollbar-track: #1A1A24;
  --scrollbar-thumb: #3A3A4A;
  
  color-scheme: dark;
}

/* ═══ LIGHT THEME ═══ */
[data-theme="light"] {
  --bg-primary: #F8F9FC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F0F1F5;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F0F1F5;
  --bg-active: #E8E9EE;
  
  --surface-glass: rgba(255, 255, 255, 0.7);
  --surface-glass-hover: rgba(255, 255, 255, 0.85);
  --surface-glass-border: rgba(0, 0, 0, 0.06);
  
  --text-primary: #1A1A2E;
  --text-secondary: #5A5A72;
  --text-tertiary: #8888A0;
  --text-disabled: #B0B0C0;
  --text-inverse: #FFFFFF;
  
  --border-primary: rgba(0, 0, 0, 0.08);
  --border-secondary: rgba(0, 0, 0, 0.04);
  --border-focus: var(--brand-primary);
  
  --input-bg: #FFFFFF;
  --input-border: rgba(0, 0, 0, 0.12);
  --input-focus-border: var(--brand-primary);
  --input-placeholder: #B0B0C0;
  
  --scrollbar-track: #F0F1F5;
  --scrollbar-thumb: #D0D0DE;
  
  color-scheme: light;
}