/**
 * Design Tokens & SCSS Variables
 * 
 * This is the source of truth for all styling logic.
 * All components use SCSS variables ($presszone-comments-*) for theming.
 */

// =============================================================================
// SECTION A: SCSS VARIABLES (Used in component files)
// =============================================================================

// ----- Light Mode Colors -----
$presszone-comments-bg-primary: #FFFFFF;
$presszone-comments-bg-secondary: #F1F5F9;
$presszone-comments-bg-hover: #E2E8F0;
$presszone-comments-bg-hover-accent: rgba(31, 113, 221, 0.1);
$presszone-comments-text-primary: #0F172A;
$presszone-comments-text-secondary: #334155;
$presszone-comments-text-muted: #64748B;
$presszone-comments-border: #E2E8F0;
$presszone-comments-shadow: rgba(0, 0, 0, 0.1);
$presszone-comments-light-shadow: rgba(0, 0, 0, 0.1);
$presszone-comments-light-indent-line: rgba(0, 0, 0, 0.1);

// ----- Dark Mode Colors -----
$presszone-comments-dark-bg-primary: #131314;
$presszone-comments-dark-bg-secondary: #1E1F20;
$presszone-comments-dark-bg-hover: #444746;
$presszone-comments-dark-bg-hover-accent: rgba(31, 113, 221, 0.15);
$presszone-comments-dark-text-primary: #E3E3E3;
$presszone-comments-dark-text-secondary: #C4C7C5;
$presszone-comments-dark-text-muted: #BDC1C6;
$presszone-comments-dark-border: #444746;
$presszone-comments-dark-shadow: rgba(0, 0, 0, 0.5);
$presszone-comments-dark-indent-line: rgba(255, 255, 255, 0.1);

// ----- Brand & Status Colors (Same in Light/Dark) -----
$presszone-comments-primary: #1f71dd;
$presszone-comments-accent: #1f71dd;
$presszone-comments-accent-dim: rgba(31, 113, 221, 0.12);
$presszone-comments-success: #34D399;
$presszone-comments-error: #F87171;
$presszone-comments-warning: #FBBF24;

// ----- Typography -----
$presszone-comments-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$presszone-comments-font-size-xs: 0.75rem;
$presszone-comments-font-size-sm: 0.85rem;
$presszone-comments-font-size-base: 1rem;
$presszone-comments-font-size-md: 1.1rem;
$presszone-comments-font-size-lg: 1.25rem;
$presszone-comments-font-size-xl: 1.75rem;
$presszone-comments-font-size-xxl: 2rem;

// ----- Spacing -----
$presszone-comments-spacing-zero: 0;
$presszone-comments-spacing-xxs: 2px;
$presszone-comments-spacing-xs: 4px;
$presszone-comments-spacing-sm: 8px;
$presszone-comments-spacing-md: 12px;
$presszone-comments-spacing-lg: 16px;
$presszone-comments-spacing-xl: 24px;
$presszone-comments-spacing-xxl: 40px;
$presszone-comments-spacing-3xl: 60px;
$presszone-comments-spacing-giant: 200px;

// ----- Border Radius (Base values) -----
$presszone-comments-radius-sm: 4px;
$presszone-comments-radius-md: 8px;
$presszone-comments-radius-lg: 12px;
$presszone-comments-radius-xl: 25px;
$presszone-comments-radius-full: 9999px;

// ----- Borders & Shadows ----- 
$presszone-comments-border-width: 1px;
$presszone-comments-border-width-lg: 3px;
$presszone-comments-border-width-xl: 5px;
$presszone-comments-shadow-blur: 4px;
$presszone-comments-shadow-spread: 12px;
$presszone-comments-shadow-offset-y: 4px;

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

// ----- Layout & Dimensions -----
$presszone-comments-max-width: 1140px;
$presszone-comments-sidebar-width: 260px;
$presszone-comments-editor-min-height: 100px;
$presszone-comments-popover-width: 250px;
$presszone-comments-dropdown-min-width: 200px;
$presszone-comments-menu-min-width: 160px;
$presszone-comments-input-max-width: 400px;
$presszone-comments-input-min-width: 150px;
$presszone-comments-grid-min-col-width: 300px;
$presszone-comments-toast-min-width: 250px;
$presszone-comments-share-tooltip-min-width: 180px;
$presszone-comments-share-link-size: 36px;
$presszone-comments-indent-step: 20px;

// ----- Breakpoints -----
$presszone-comments-breakpoint-sm: 640px;
$presszone-comments-breakpoint-md: 768px;
$presszone-comments-breakpoint-lg: 1024px;

// ----- Icon Sizes -----
$presszone-comments-icon-size: 1.25rem;
$presszone-comments-icon-size-sm: 16px;
$presszone-comments-icon-size-md: 20px;
$presszone-comments-icon-size-base: 1rem;

// ----- Button Sizes -----
$presszone-comments-btn-size-sm: 32px;
$presszone-comments-btn-size-md: 36px;

// ----- Toggle -----
$presszone-comments-toggle-width: 44px;
$presszone-comments-toggle-height: 24px;

// ----- Z-Index -----
$presszone-comments-z-modal: 1000;
$presszone-comments-z-popover: 1100;
$presszone-comments-z-tooltip: 1200;
$presszone-comments-z-index-tooltip: 1200; // Deprecated, kept for backward compat
$presszone-comments-z-index-toast: 10000;
$presszone-comments-z-index-confetti: 10001;

// ----- Transitions -----
$presszone-comments-duration-fast: 150ms;
$presszone-comments-duration-normal: 250ms;
$presszone-comments-duration-slow: 350ms;
$presszone-comments-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

// ----- Modal -----
$presszone-comments-modal-overlay: rgba(0, 0, 0, 0.5);

// ----- Notice Colors -----
$presszone-comments-notice-info-bg: rgba(31, 113, 221, 0.1);
$presszone-comments-notice-info-border: rgba(31, 113, 221, 0.3);
$presszone-comments-notice-warning-bg: rgba(251, 191, 36, 0.1);
$presszone-comments-notice-warning-border: rgba(251, 191, 36, 0.3);
$presszone-comments-notice-error-bg: rgba(248, 113, 113, 0.1);
$presszone-comments-notice-error-border: rgba(248, 113, 113, 0.3);

// ----- Inherit Mode (for WP theme integration) -----
$presszone-comments-inherit-bg-subtle: rgba(128, 128, 128, 0.1);
$presszone-comments-inherit-bg-muted: rgba(128, 128, 128, 0.15);
$presszone-comments-inherit-bg-strong: rgba(128, 128, 128, 0.2);
$presszone-comments-inherit-bg-active: rgba(128, 128, 128, 0.3);
$presszone-comments-inherit-border: rgba(128, 128, 128, 0.3);
$presszone-comments-inherit-bg-hover-accent: rgba(128, 128, 128, 0.08);
$presszone-comments-inherit-bg-hover-strong: rgba(128, 128, 128, 0.25);
$presszone-comments-wp-fallback-bg: #1a1a1a;
$presszone-comments-wp-fallback-text: #e3e3e3;

// Dropdown/Popover colors for inherit mode (readable in both light/dark themes)
$presszone-comments-inherit-dropdown-bg: rgba(248, 248, 248, 0.98);
$presszone-comments-inherit-dropdown-text: #1a1a1a;
$presszone-comments-inherit-dropdown-text-hover: #000000;
$presszone-comments-inherit-dropdown-border: rgba(0, 0, 0, 0.1);
$presszone-comments-inherit-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
$presszone-comments-inherit-dropdown-hover-bg: rgba(128, 128, 128, 0.15);


// =============================================================================
// SECTION B: PURE SCSS ARCHITECTURE
// =============================================================================
// All styling uses pure SCSS variables ($presszone-comments-*).
// Runtime theme switching is handled via class-based architecture.

// =============================================================================
// SECTION C: THEME MAPS (Class-Based Architecture)
// =============================================================================

$themes: (
    'light': ('bg-primary': $presszone-comments-bg-primary,
        'bg-secondary': $presszone-comments-bg-secondary,
        'bg-hover': $presszone-comments-bg-hover,
        'bg-hover-accent': $presszone-comments-bg-hover-accent,
        'text-primary': $presszone-comments-text-primary,
        'text-secondary': $presszone-comments-text-secondary,
        'text-muted': $presszone-comments-text-muted,
        'border': $presszone-comments-border,
        'shadow': $presszone-comments-shadow,
        'indent-line': $presszone-comments-light-indent-line,

        // Modal Specifics (Solid)
        'modal-bg': $presszone-comments-bg-primary,
        'modal-border': $presszone-comments-border,

        // Admin Actions / Dropdowns (Solid)
        'dropdown-bg': $presszone-comments-bg-primary,
        'dropdown-text': $presszone-comments-text-primary,
        'accent': $presszone-comments-accent,
    ),
    'dark': ('bg-primary': $presszone-comments-dark-bg-primary,
        'bg-secondary': $presszone-comments-dark-bg-secondary,
        'bg-hover': $presszone-comments-dark-bg-hover,
        'bg-hover-accent': $presszone-comments-dark-bg-hover-accent,
        'text-primary': $presszone-comments-dark-text-primary,
        'text-secondary': $presszone-comments-dark-text-secondary,
        'text-muted': $presszone-comments-dark-text-muted,
        'border': $presszone-comments-dark-border,
        'shadow': $presszone-comments-dark-shadow,
        'indent-line': $presszone-comments-dark-indent-line,

        // Modal Specifics (Solid)
        'modal-bg': $presszone-comments-dark-bg-secondary,
        'modal-border': $presszone-comments-dark-border,

        // Admin Actions / Dropdowns (Solid)
        'dropdown-bg': $presszone-comments-dark-bg-secondary,
        'dropdown-text': $presszone-comments-dark-text-primary,
        'accent': $presszone-comments-accent,
    ),
    'inherit': ('bg-primary': transparent, // Main wrapper allows see-through
        'bg-secondary': transparent,
        'bg-hover': $presszone-comments-inherit-bg-subtle,
        'bg-hover-accent': $presszone-comments-inherit-bg-hover-accent,
        // Explicit fallback colors for WCAG 2.1 AA compliance (4.5:1 contrast)
        // Using light mode colors as base to ensure readability on typical WP themes
        'text-primary': $presszone-comments-text-primary,
        'text-secondary': $presszone-comments-text-secondary,
        'text-muted': $presszone-comments-text-muted,
        'border': $presszone-comments-inherit-border,
        'shadow': none,
        'indent-line': $presszone-comments-inherit-border,

        // Modal Specifics (MUST BE SOLID with hardcoded colors for readability)
        // Using hardcoded values to prevent white-on-white in dark WP themes
        'modal-bg': $presszone-comments-inherit-dropdown-bg,
        'modal-border': $presszone-comments-inherit-dropdown-border,

        // Admin Actions / Dropdowns (MUST BE SOLID with hardcoded colors)
        // Using hardcoded values to ensure black text on light gray background
        'dropdown-bg': $presszone-comments-inherit-dropdown-bg,
        'dropdown-text': $presszone-comments-inherit-dropdown-text,
        'accent': $presszone-comments-accent,
    )
);