/**
 * tokens.css - HANQ 통합 디자인 토큰
 * auth.css (login.html, ip_access_denied.html) 기준 Slate 팔레트
 */

:root {
  /* ========================================
     Slate Palette (auth.css 기준)
     ======================================== */
  --hq-slate-50: #f8fafc;
  --hq-slate-100: #f1f5f9;
  --hq-slate-200: #e2e8f0;
  --hq-slate-300: #cbd5e1;
  --hq-slate-400: #94a3b8;
  --hq-slate-500: #64748b;
  --hq-slate-600: #475569;
  --hq-slate-700: #334155;
  --hq-slate-800: #1e293b;
  --hq-slate-900: #0f172a;

  /* ========================================
     Semantic Colors
     ======================================== */
  --hq-color-primary: var(--hq-slate-800);
  --hq-color-primary-hover: var(--hq-slate-700);
  --hq-color-primary-active: var(--hq-slate-900);

  --hq-color-secondary: var(--hq-slate-100);
  --hq-color-secondary-hover: var(--hq-slate-200);

  --hq-color-background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --hq-color-surface: #fff;
  --hq-color-surface-elevated: #fff;

  --hq-color-text-primary: var(--hq-slate-900);
  --hq-color-text-secondary: var(--hq-slate-500);
  --hq-color-text-muted: var(--hq-slate-400);

  --hq-color-border: var(--hq-slate-200);
  --hq-color-border-focus: var(--hq-slate-800);

  /* ========================================
     Feedback Colors - Error
     ======================================== */
  --hq-color-error-bg: #fef2f2;
  --hq-color-error-border: #fecaca;
  --hq-color-error-text: #b91c1c;
  --hq-color-error-icon: #dc2626;

  /* ========================================
     Feedback Colors - Success
     ======================================== */
  --hq-color-success-bg: #f0fdf4;
  --hq-color-success-border: #bbf7d0;
  --hq-color-success-text: #166534;
  --hq-color-success-icon: #16a34a;

  /* ========================================
     Feedback Colors - Warning
     ======================================== */
  --hq-color-warning-bg: #fefce8;
  --hq-color-warning-border: #fef08a;
  --hq-color-warning-text: #854d0e;
  --hq-color-warning-icon: #ca8a04;

  /* ========================================
     Feedback Colors - Info
     ======================================== */
  --hq-color-info-bg: #eff6ff;
  --hq-color-info-border: #bfdbfe;
  --hq-color-info-text: #1e40af;
  --hq-color-info-icon: #2563eb;

  /* ========================================
     Typography
     ======================================== */
  --hq-font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hq-font-family-mono: 'SF Mono', 'Consolas', monospace;

  --hq-font-size-xs: 0.6875rem;    /* 11px */
  --hq-font-size-sm: 0.75rem;      /* 12px */
  --hq-font-size-base: 0.8125rem;  /* 13px */
  --hq-font-size-md: 0.875rem;     /* 14px */
  --hq-font-size-lg: 0.9375rem;    /* 15px */
  --hq-font-size-xl: 1.125rem;     /* 18px */
  --hq-font-size-2xl: 1.375rem;    /* 22px */
  --hq-font-size-3xl: 1.5rem;      /* 24px */

  /* ========================================
     Spacing
     ======================================== */
  --hq-space-1: 0.25rem;   /* 4px */
  --hq-space-2: 0.375rem;  /* 6px */
  --hq-space-3: 0.5rem;    /* 8px */
  --hq-space-4: 0.625rem;  /* 10px */
  --hq-space-5: 0.75rem;   /* 12px */
  --hq-space-6: 1rem;      /* 16px */
  --hq-space-7: 1.25rem;   /* 20px */
  --hq-space-8: 1.5rem;    /* 24px */
  --hq-space-9: 2rem;      /* 32px */
  --hq-space-10: 2.5rem;   /* 40px */

  /* ========================================
     Border Radius
     ======================================== */
  --hq-radius-sm: 6px;
  --hq-radius-md: 10px;
  --hq-radius-lg: 12px;
  --hq-radius-xl: 16px;
  --hq-radius-2xl: 20px;
  --hq-radius-full: 9999px;

  /* ========================================
     Shadows
     ======================================== */
  --hq-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --hq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --hq-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
                  0 10px 20px -5px rgba(0, 0, 0, 0.1);
  --hq-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                  0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --hq-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.06);

  /* ========================================
     Transitions
     ======================================== */
  --hq-transition-fast: 0.15s ease;
  --hq-transition-base: 0.2s ease;
  --hq-transition-slow: 0.3s ease;
  --hq-transition-spring: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     Gradients
     ======================================== */
  --hq-gradient-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --hq-gradient-primary-hover: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  --hq-gradient-divider: linear-gradient(to right, transparent, #e2e8f0, transparent);

  /* ========================================
     Z-Index
     ======================================== */
  --hq-z-dropdown: 1000;
  --hq-z-sticky: 1020;
  --hq-z-modal-backdrop: 1040;
  --hq-z-modal: 1050;
  --hq-z-tooltip: 1070;
  --hq-z-loading: 9999;

  /* ========================================
     Nav (Light Mode defaults)
     ======================================== */
  --hq-nav-bg: var(--hq-slate-800);
  --hq-nav-text: #fff;
  --hq-nav-hover: rgba(255, 255, 255, 0.1);
  --hq-nav-dropdown-bg: #fff;
  --hq-nav-dropdown-text: var(--hq-slate-700);
  --hq-nav-dropdown-hover: var(--hq-slate-50);

  /* ========================================
     Input (Light Mode defaults)
     ======================================== */
  --hq-input-bg: #fff;
  --hq-input-border: var(--hq-slate-300);
  --hq-input-text: var(--hq-slate-900);
  --hq-input-placeholder: var(--hq-slate-400);

  /* ========================================
     Modal (Light Mode defaults)
     ======================================== */
  --hq-modal-bg: #fff;
  --hq-modal-border: var(--hq-slate-200);
  --hq-color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* ========================================
     Loading (Light Mode defaults)
     ======================================== */
  --hq-loading-bg: rgba(255, 255, 255, 0.95);
  --hq-loading-spinner-primary: #4361ee;
  --hq-loading-spinner-secondary: rgba(67, 97, 238, 0.2);

  /* ========================================
     Spinner Tokens (Single Source of Truth)
     ======================================== */
  --hq-spinner-track: var(--hq-slate-200);
  --hq-spinner-indicator: var(--hq-slate-700);
  --hq-spinner-indicator-accent: var(--hq-slate-500);
  --hq-spinner-text: var(--hq-color-text-secondary);
  --hq-spinner-speed: 0.8s;
  --hq-spinner-size-xs: 14px;
  --hq-spinner-size-sm: 20px;
  --hq-spinner-size-md: 28px;
  --hq-spinner-size-lg: 40px;
  --hq-spinner-size-xl: 56px;
  --hq-spinner-thickness-xs: 2px;
  --hq-spinner-thickness-sm: 2px;
  --hq-spinner-thickness-md: 2.5px;
  --hq-spinner-thickness-lg: 3px;
  --hq-spinner-thickness-xl: 3.5px;

  /* ========================================
     Page Gradient (Light Mode)
     ======================================== */
  --hq-gradient-page: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* ========================================
   Layout Classes
   ======================================== */
.hq-l-page {
  min-height: 100vh;
  background: var(--hq-color-background);
  color: var(--hq-color-text-primary);
}

.hq-l-surface {
  background: var(--hq-color-surface);
  color: var(--hq-color-text-primary);
}

.hq-l-surface-elevated {
  background: var(--hq-color-surface-elevated);
  color: var(--hq-color-text-primary);
}

/* ========================================
   Common Animations
   ======================================== */
@keyframes hq-spin {
  to { transform: rotate(360deg); }
}

/* Legacy alias for backward compatibility */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes hq-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hq-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.9;
  }
}

@keyframes hq-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}