// ==========================================================================
// Comments Press Zone - Admin SCSS Variables
// ==========================================================================
// This file contains all design tokens as SCSS variables for the admin panel.
// Light mode variables are the default, dark mode uses -dark suffix.
// Usage: Use light vars normally, use -dark vars inside .dark-mode & { } blocks.
//
// Example:
//   .card {
//       background: $presszone-comments-surface;
//       .dark-mode & {
//           background: $presszone-comments-surface-dark;
//       }
//   }
// ==========================================================================

// ==========================================================================
// TYPOGRAPHY
// ==========================================================================

$presszone-comments-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

// ==========================================================================
// COLORS - BACKGROUNDS
// ==========================================================================

// Light Mode
$presszone-comments-bg: #f8fafc;
$presszone-comments-surface: #ffffff;
$presszone-comments-surface-2: #f1f5f9;
$presszone-comments-surface-3: #e2e8f0;
$presszone-comments-surface-alt: #f8fafc;
$presszone-comments-glass-bg: rgba(255, 255, 255, 0.9);

// Dark Mode
$presszone-comments-bg-dark: #131314;
$presszone-comments-bg-start-dark: #131314;
$presszone-comments-bg-end-dark: #1a1b1c;
$presszone-comments-surface-dark: #1e1f20;
$presszone-comments-surface-2-dark: #282a2c;
$presszone-comments-surface-3-dark: #353739;
$presszone-comments-surface-alt-dark: #1e1f20;
$presszone-comments-glass-dark: rgba(30, 31, 32, 0.95);
$presszone-comments-glass-bg-dark: rgba(30, 31, 32, 0.95);
$presszone-comments-glass-border-dark: rgba(255, 255, 255, 0.08);

// ==========================================================================
// COLORS - PRIMARY
// ==========================================================================

// Light Mode
$presszone-comments-primary: #1f71dd;
$presszone-comments-primary-hover: #185bb5;
$presszone-comments-primary-dim: rgba(31, 113, 221, 0.08);
$presszone-comments-primary-glow: rgba(31, 113, 221, 0.15);
$presszone-comments-text-on-primary: #ffffff;
$presszone-comments-primary-shadow-sm: rgba(31, 113, 221, 0.2);
$presszone-comments-primary-shadow-md: rgba(31, 113, 221, 0.25);
$presszone-comments-primary-shadow-focus: rgba(31, 113, 221, 0.25);

// Dark Mode
$presszone-comments-primary-dark: #1f71dd;
$presszone-comments-primary-hover-dark: #185bb5;
$presszone-comments-primary-dim-dark: rgba(31, 113, 221, 0.15);
$presszone-comments-primary-glow-dark: rgba(31, 113, 221, 0.25);
$presszone-comments-primary-link-dark: #1f71dd;
$presszone-comments-text-on-primary-dark: #ffffff;

// ==========================================================================
// COLORS - SECONDARY
// ==========================================================================

// Light Mode
$presszone-comments-secondary: #238442;
$presszone-comments-secondary-hover: #1a6633;

// Dark Mode
$presszone-comments-secondary-dark: #238442;

// ==========================================================================
// COLORS - TEXT
// ==========================================================================

// Light Mode
$presszone-comments-text: #0f172a;
$presszone-comments-text-secondary: #334155;
$presszone-comments-text-muted: #64748b;

// Dark Mode
$presszone-comments-text-dark: #e3e3e3;
$presszone-comments-text-secondary-dark: #c4c7c5;
$presszone-comments-text-muted-dark: #9aa0a6;

// ==========================================================================
// COLORS - BORDERS
// ==========================================================================

// Light Mode
$presszone-comments-border: #e2e8f0;
$presszone-comments-border-hover: #cbd5e1;

// Dark Mode
$presszone-comments-border-dark: #3c4043;
$presszone-comments-border-hover-dark: #5f6368;

// ==========================================================================
// COLORS - STATUS: SUCCESS
// ==========================================================================

// Light Mode
$presszone-comments-success: #10b981;
$presszone-comments-success-hover: #059669;
$presszone-comments-success-dim: rgba(16, 185, 129, 0.2);
$presszone-comments-success-dim-alt: rgba(74, 222, 128, 0.2);
$presszone-comments-success-dim-lighter: rgba(74, 222, 128, 0.1);
$presszone-comments-success-shadow: rgba(16, 185, 129, 0.3);
$presszone-comments-success-shadow-hover: rgba(16, 185, 129, 0.4);

// Dark Mode
$presszone-comments-success-dark: #34d399;
$presszone-comments-success-hover-dark: #10b981;
$presszone-comments-success-dim-dark: rgba(52, 211, 153, 0.2);

// ==========================================================================
// COLORS - STATUS: WARNING
// ==========================================================================

// Light Mode
$presszone-comments-warning: #f59e0b;
$presszone-comments-warning-hover: #d97706;
$presszone-comments-warning-dim: rgba(245, 158, 11, 0.2);
$presszone-comments-warning-dim-alt: rgba(251, 191, 36, 0.15);
$presszone-comments-warning-dim-alt2: rgba(251, 191, 36, 0.08);
$presszone-comments-warning-dim-lighter: rgba(245, 158, 11, 0.15);
$presszone-comments-warning-dim-lightest: rgba(245, 158, 11, 0.08);
$presszone-comments-warning-dim-lightest2: rgba(245, 158, 11, 0.05);
$presszone-comments-warning-border: rgba(251, 191, 36, 0.3);
$presszone-comments-warning-gradient-start: rgba(245, 158, 11, 0.15);
$presszone-comments-warning-gradient-end: rgba(245, 158, 11, 0.08);

// Dark Mode
$presszone-comments-warning-dark: #fbbf24;
$presszone-comments-warning-hover-dark: #fbbf24;
$presszone-comments-warning-dim-dark: rgba(251, 191, 36, 0.2);
$presszone-comments-warning-dim-alt-dark: rgba(251, 191, 36, 0.15);
$presszone-comments-warning-border-dark: rgba(251, 191, 36, 0.3);

// ==========================================================================
// COLORS - STATUS: ERROR
// ==========================================================================

// Light Mode
$presszone-comments-error: #ef4444;
$presszone-comments-error-hover: #dc2626;
$presszone-comments-error-dim: rgba(239, 68, 68, 0.2);
$presszone-comments-error-dim-alt: rgba(239, 68, 68, 0.1);
$presszone-comments-error-dim-lighter: rgba(248, 113, 113, 0.1);
$presszone-comments-error-dim-lightest: rgba(239, 68, 68, 0.05);
$presszone-comments-error-border: rgba(239, 68, 68, 0.2);
$presszone-comments-error-shadow: rgba(239, 68, 68, 0.3);
$presszone-comments-error-shadow-hover: rgba(239, 68, 68, 0.4);

// Dark Mode
$presszone-comments-error-dark: #f87171;
$presszone-comments-error-hover-dark: #f87171;
$presszone-comments-error-dim-dark: rgba(248, 113, 113, 0.2);

// ==========================================================================
// COLORS - INFO
// ==========================================================================

// Light Mode
$presszone-comments-info-bg: rgba(168, 199, 250, 0.1);
$presszone-comments-info-border: rgba(168, 199, 250, 0.3);

// Dark Mode
$presszone-comments-info-bg-dark: rgba(59, 130, 246, 0.2);

// ==========================================================================
// COLORS - BADGE
// ==========================================================================

// Light Mode
$presszone-comments-badge-category-bg: #dbeafe;
$presszone-comments-badge-category-text: #1e40af;
$presszone-comments-badge-section-bg: #dcfce7;
$presszone-comments-badge-section-text: #166534;
$presszone-comments-badge-link-bg: #fef3c7;
$presszone-comments-badge-link-text: #92400e;
$presszone-comments-badge-page-bg: #f3e8ff;
$presszone-comments-badge-page-text: #7c3aed;

// Dark Mode
$presszone-comments-badge-category-bg-dark: rgba(59, 130, 246, 0.2);
$presszone-comments-badge-category-text-dark: #93c5fd;
$presszone-comments-badge-section-bg-dark: rgba(34, 197, 94, 0.2);
$presszone-comments-badge-section-text-dark: #86efac;
$presszone-comments-badge-link-bg-dark: rgba(251, 191, 36, 0.2);
$presszone-comments-badge-link-text-dark: #fde68a;
$presszone-comments-badge-page-bg-dark: rgba(168, 85, 247, 0.2);
$presszone-comments-badge-page-text-dark: #d8b4fe;

// ==========================================================================
// COLORS - OVERLAYS & SURFACES
// ==========================================================================

// Overlays (shared across modes)
$presszone-comments-overlay: rgba(0, 0, 0, 0.7);
$presszone-comments-overlay-light: rgba(15, 23, 42, 0.6);
$presszone-comments-overlay-dark: rgba(0, 0, 0, 0.75);

// Surface hover states (shared)
$presszone-comments-surface-hover: rgba(255, 255, 255, 0.05);
$presszone-comments-surface-hover-light: rgba(255, 255, 255, 0.03);
$presszone-comments-surface-hover-bright: rgba(255, 255, 255, 0.08);
$presszone-comments-surface-border: rgba(255, 255, 255, 0.1);
$presszone-comments-surface-dim: rgba(0, 0, 0, 0.2);

// ==========================================================================
// BORDER RADIUS
// ==========================================================================

$presszone-comments-radius: 12px;
$presszone-comments-radius-sm: 8px;
$presszone-comments-radius-lg: 16px;
$presszone-comments-radius-xl: 20px;
$presszone-comments-radius-full: 9999px;

// ==========================================================================
// BORDER WIDTH
// ==========================================================================

$presszone-comments-border-width: 1px;
$presszone-comments-border-width-lg: 2px;
$presszone-comments-border-width-xl: 3px;

// ==========================================================================
// BUTTON PADDING
// ==========================================================================

$presszone-comments-btn-padding-sm: 6px 14px;
$presszone-comments-btn-padding-md: 10px 20px;
$presszone-comments-btn-padding-lg: 14px 28px;

// ==========================================================================
// SHADOWS
// ==========================================================================

// Light Mode
$presszone-comments-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
$presszone-comments-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
$presszone-comments-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$presszone-comments-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);

// Dark Mode
$presszone-comments-shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.4);
$presszone-comments-shadow-sm-dark: 0 2px 8px rgba(0, 0, 0, 0.3);
$presszone-comments-shadow-hover-dark: 0 8px 30px rgba(0, 0, 0, 0.5);
$presszone-comments-shadow-modal-dark: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);

// ==========================================================================
// Z-INDEX SCALE
// ==========================================================================

$presszone-comments-z-base: 1;
$presszone-comments-z-dropdown: 100;
$presszone-comments-z-sticky: 1000;
$presszone-comments-z-modal: 10000;
$presszone-comments-z-tooltip: 10001;

// ==========================================================================
// BREAKPOINTS
// ==========================================================================

$presszone-comments-breakpoint-sm: 576px;
$presszone-comments-breakpoint-md: 768px;
$presszone-comments-breakpoint-lg: 992px;
$presszone-comments-breakpoint-xl: 1200px;

// ==========================================================================
// ANIMATION TIMING
// ==========================================================================

// Durations
$presszone-comments-duration-instant: 100ms;
$presszone-comments-duration-fast: 150ms;
$presszone-comments-duration-normal: 250ms;
$presszone-comments-duration-slow: 350ms;
$presszone-comments-duration-emphasis: 500ms;
$presszone-comments-spinner-duration: 0.8s;
$presszone-comments-stagger: 60ms;

// Easing Functions
$presszone-comments-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
$presszone-comments-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
$presszone-comments-ease-out: cubic-bezier(0, 0, 0.2, 1);
$presszone-comments-ease-in: cubic-bezier(0.4, 0, 1, 1);

// Tab Slide Animation
$presszone-comments-tab-slide-duration: 0.35s;
$presszone-comments-tab-slide-easing: cubic-bezier(0.34, 1.56, 0.64, 1);

// ==========================================================================
// SPACING
// ==========================================================================

$presszone-comments-spacing-xs: 4px;
$presszone-comments-spacing-sm: 8px;
$presszone-comments-spacing-md: 16px;
$presszone-comments-spacing-lg: 24px;
$presszone-comments-spacing-xl: 32px;
$presszone-comments-spacing-2xl: 48px;