// ==========================================================================
// PressZone Theme - SCSS Variables
// ==========================================================================
// Single source of truth for all design tokens.
// Uses native Sass variables - no CSS custom properties.
// Dark mode handled via body.dark-mode & nesting pattern.
// ==========================================================================

// --------------------------------------------------------------------------
// Color Palette - Base Colors (Press.Zone Design)
// --------------------------------------------------------------------------
$color-primary: #20d3ee; // Cyan/Turquoise
$color-primary-hover: #67e8f9;
$color-primary-light: #a5f3fc;
$color-secondary: #f97316; // Orange
$color-secondary-hover: #fb923c;

$color-success: #10b981;
$color-warning: #f59e0b;
$color-danger: #ef4444;
$color-info: #06b6d4;

// --------------------------------------------------------------------------
// Light Mode Colors (Default Theme)
// --------------------------------------------------------------------------
$light-bg-primary: #ffffff;
$light-bg-secondary: #f8f9fa;
$light-bg-tertiary: #f1f5f9;
$light-bg-card: #ffffff;

$light-text-primary: #1a1a1a;
$light-text-secondary: #4b5563;
$light-text-muted: #9ca3af;

$light-border-color: #e5e7eb;
$light-border-light: #d1d5db;

// Header backgrounds (light mode)
$light-header-bg: rgba(255, 255, 255, 0.95);
$light-header-scrolled-bg: rgba(255, 255, 255, 0.98);

// --------------------------------------------------------------------------
// Dark Mode Colors
// --------------------------------------------------------------------------
$dark-bg-primary: #112022;
$dark-bg-secondary: #152629;
$dark-bg-tertiary: #1a2c30;
$dark-bg-card: #1a2c30;

$dark-text-primary: #ffffff;
$dark-text-secondary: #9ca3af;
$dark-text-muted: #6b7280;

$dark-border-color: #234348;
$dark-border-light: #2c555b;

// Header backgrounds (dark mode)
$dark-header-bg: rgba(17, 32, 34, 0.95);
$dark-header-scrolled-bg: rgba(21, 38, 41, 0.98);

// Code colors
$light-code-color: $color-danger;
$light-code-bg: $light-bg-tertiary;
$dark-code-color: #ff6b6b;
$dark-code-bg: $dark-bg-tertiary;

// --------------------------------------------------------------------------
// Typography
// --------------------------------------------------------------------------
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-family-mono: 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', monospace;

$font-size-base: 1rem;
$font-size-sm: 0.875rem;
$font-size-lg: 1.125rem;
$font-size-xl: 1.25rem;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extrabold: 800;

$line-height-base: 1.6;
$line-height-heading: 1.2;

// --------------------------------------------------------------------------
// Spacing
// --------------------------------------------------------------------------
$spacer: 1rem;

$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    6: $spacer * 4,
    7: $spacer * 5,
    8: $spacer * 6,
);

// --------------------------------------------------------------------------
// Border Radius
// --------------------------------------------------------------------------
$border-radius-sm: 0.25rem;
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;
$border-radius-xl: 1rem;
$border-radius-2xl: 1.5rem;
$border-radius-pill: 9999px;

// --------------------------------------------------------------------------
// Shadows
// --------------------------------------------------------------------------
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

// --------------------------------------------------------------------------
// Transitions
// --------------------------------------------------------------------------
$transition-fast: 150ms ease;
$transition-base: 250ms ease;
$transition-slow: 350ms ease;

// --------------------------------------------------------------------------
// Z-Index
// --------------------------------------------------------------------------
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// --------------------------------------------------------------------------
// Breakpoints (matching Bootstrap)
// --------------------------------------------------------------------------
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// --------------------------------------------------------------------------
// Container Widths
// --------------------------------------------------------------------------
$container-max-width: 1320px;
$content-max-width: 800px;