// ==========================================================================
// 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-multilingual-surface;
//       .dark-mode & {
//           background: $presszone-multilingual-surface-dark;
//       }
//   }
// ==========================================================================

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Light Mode
$presszone-multilingual-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
$presszone-multilingual-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
$presszone-multilingual-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$presszone-multilingual-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-multilingual-shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.4);
$presszone-multilingual-shadow-sm-dark: 0 2px 8px rgba(0, 0, 0, 0.3);
$presszone-multilingual-shadow-hover-dark: 0 8px 30px rgba(0, 0, 0, 0.5);
$presszone-multilingual-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-multilingual-z-base: 1;
$presszone-multilingual-z-dropdown: 100;
$presszone-multilingual-z-sticky: 1000;
$presszone-multilingual-z-modal: 10000;
$presszone-multilingual-z-tooltip: 10001;

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

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

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

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

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

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

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

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

// ==========================================================================
// LEGACY MPZ TOKENS (mpz-* page styles)
// ==========================================================================
// These variables existed in `main.scss` under the old `@import` global scope.
// With the Sass module system (`@use`), each stylesheet is isolated, so legacy
// partials that reference generic variables (e.g. `$text-secondary`) need a
// shared source of truth.

// Colors
$primary-color: #0073aa !default;
$primary-hover: #005a87 !default;
$secondary-color: #2271b1 !default;
$success-color: #00a32a !default;
$warning-color: #f0b849 !default;
$error-color: #d63638 !default;
$info-color: #2271b1 !default;

// Text & surfaces
$text-primary: #1e1e1e !default;
$text-secondary: #757575 !default;
$text-light: #a7aaad !default;
$border-color: #c3c4c7 !default;
$background-light: #f0f0f1 !default;
$background-white: #ffffff !default;

// Dark mode (legacy)
$dark-bg: #1e1e1e !default;
$dark-surface: #2c2c2c !default;
$dark-text: #e4e4e4 !default;
$dark-border: #3c3c3c !default;

// Spacing
$spacing-xs: 4px !default;
$spacing-sm: 8px !default;
$spacing-md: 16px !default;
$spacing-lg: 24px !default;
$spacing-xl: 32px !default;

// Radius
$border-radius-sm: 2px !default;
$border-radius-md: 4px !default;
$border-radius-lg: 8px !default;

// Motion
$transition-fast: 0.15s ease !default;
$transition-normal: 0.3s ease !default;
$transition-slow: 0.45s ease !default;

// Z-index
$z-modal: 1000 !default;
$z-dropdown: 900 !default;
$z-fixed-header: 800 !default;
$z-overlay: 700 !default;