/**
 * GFG Feedback Form - CSS Variables & Theme System
 * Adapted from GFG Event Portal theming
 */

/* ============================================
   Default Theme (Dark Mode)
   ============================================ */
:root {
  /* ============================================
     Color Palette - Backgrounds
     ============================================ */
  --color-bg-void: #0a0a0a;
  --color-bg-primary: #0f0f0f;
  --color-bg-secondary: #1a1a1a;
  --color-bg-tertiary: #2a2a2a;
  --color-bg-quaternary: #3a3a3a;
  --color-bg-hover: #222222;

  /* ============================================
     Color Palette - Borders
     ============================================ */
  --color-border-subtle: #2a2a2a;
  --color-border-default: #3a3a3a;
  --color-border-strong: #4a4a4a;

  /* ============================================
     Color Palette - Text
     ============================================ */
  --color-text-primary: #e5e5e5;
  --color-text-secondary: #9ca3af;
  --color-text-tertiary: #b0b0b0;
  --color-text-muted: #6b7280;
  --color-text-disabled: #4b5563;

  /* ============================================
     Color Palette - Semantic Colors
     ============================================ */
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-success-border: rgba(16, 185, 129, 0.3);

  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-bg: rgba(239, 68, 68, 0.1);
  --color-danger-border: rgba(239, 68, 68, 0.3);

  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.1);
  --color-warning-border: rgba(251, 191, 36, 0.3);

  --color-info: #3b82f6;
  --color-info-bg: rgba(59, 130, 246, 0.1);
  --color-info-border: rgba(59, 130, 246, 0.3);

  /* ============================================
     Color Palette - Brand & Accent
     ============================================ */
  --color-discord: #5865f2;
  --color-discord-hover: #4752c4;
  --color-blue: #5b69f5;
  --color-blue-bg: rgba(91, 105, 245, 0.1);
  --color-blue-hover: #4752c4;
  --color-border-hover: #4a4a4a;
  --color-indigo: #6366f1;
  --color-indigo-hover: #4f46e5;

  /* ============================================
     Color Palette - User Roles
     ============================================ */
  --color-role-user: #94a3b8;
  --color-role-user-bg: #4a4a4a;
  --color-role-user-text: #b0b0b0;

  --color-role-lead: #10b981;
  --color-role-lead-bg: #064e3b;
  --color-role-lead-text: #d1fae5;

  --color-role-staff: #fbbf24;
  --color-role-staff-bg: #78350f;
  --color-role-staff-text: #fef3c7;

  --color-role-admin: #8b5cf6;
  --color-role-admin-bg: #6b21a8;
  --color-role-admin-text: #e9d5ff;

  /* ============================================
     Spacing Scale (rem-based)
     ============================================ */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 2.5rem;   /* 40px */
  --space-3xl: 3rem;     /* 48px */
  --space-4xl: 4rem;     /* 64px */

  /* ============================================
     Typography Scale (fluid sizing with clamp)
     ============================================ */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);      /* 11-12px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);     /* 13-14px */
  --text-base: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);       /* 14-16px */
  --text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);         /* 16-18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem);        /* 18-24px */
  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);        /* 24-28px */
  --text-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2rem);          /* 28-32px */
  --text-3xl: clamp(2rem, 1.75rem + 1.5vw, 2.5rem);           /* 32-40px */
  --text-4xl: clamp(2.5rem, 2rem + 2vw, 3rem);                /* 40-48px */

  /* ============================================
     Border Radius
     ============================================ */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-full: 50%;

  /* ============================================
     Transitions
     ============================================ */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* ============================================
     Z-index Scale
     ============================================ */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 30;
  --z-toast: 40;

  /* ============================================
     Shadow System
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* ============================================
   Light Theme Override
   ============================================ */
[data-theme="light"] {
  /* ============================================
     Color Palette - Backgrounds (Light)
     ============================================ */
  --color-bg-void: #ffffff;
  --color-bg-primary: #f9fafb;
  --color-bg-secondary: #f3f4f6;
  --color-bg-tertiary: #e5e7eb;
  --color-bg-quaternary: #d1d5db;
  --color-bg-hover: #e5e7eb;

  /* ============================================
     Color Palette - Borders (Light)
     ============================================ */
  --color-border-subtle: #e5e7eb;
  --color-border-default: #d1d5db;
  --color-border-strong: #9ca3af;

  /* ============================================
     Color Palette - Text (Light)
     ============================================ */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-text-disabled: #d1d5db;

  /* ============================================
     Color Palette - Semantic Colors (Light)
     ============================================ */
  --color-success: #059669;
  --color-success-bg: rgba(5, 150, 105, 0.1);
  --color-success-border: rgba(5, 150, 105, 0.3);

  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-bg: rgba(220, 38, 38, 0.1);
  --color-danger-border: rgba(220, 38, 38, 0.3);

  --color-warning: #d97706;
  --color-warning-bg: rgba(217, 119, 6, 0.1);
  --color-warning-border: rgba(217, 119, 6, 0.3);

  --color-info: #2563eb;
  --color-info-bg: rgba(37, 99, 235, 0.1);
  --color-info-border: rgba(37, 99, 235, 0.3);

  /* ============================================
     Color Palette - Brand & Accent (Light)
     ============================================ */
  --color-discord: #5865f2;
  --color-discord-hover: #4752c4;
  --color-blue: #4f46e5;
  --color-blue-bg: rgba(79, 70, 229, 0.1);
  --color-blue-hover: #4338ca;
  --color-border-hover: #9ca3af;
  --color-indigo: #4f46e5;
  --color-indigo-hover: #4338ca;

  /* ============================================
     Color Palette - User Roles (Light)
     ============================================ */
  --color-role-user: #64748b;
  --color-role-user-bg: #e2e8f0;
  --color-role-user-text: #475569;

  --color-role-lead: #059669;
  --color-role-lead-bg: #d1fae5;
  --color-role-lead-text: #064e3b;

  --color-role-staff: #d97706;
  --color-role-staff-bg: #fef3c7;
  --color-role-staff-text: #92400e;

  --color-role-admin: #7c3aed;
  --color-role-admin-bg: #ede9fe;
  --color-role-admin-text: #6b21a8;

  /* ============================================
     Shadow System (Light)
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);
}