// ==========================================================================
// Comments Press Zone - Admin SCSS Variables
// ==========================================================================
// This file contains all design tokens as SCSS variables for the admin panel.
// ==========================================================================

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

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

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

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


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

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


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

$presszone-international-secondary: #238442;
$presszone-international-secondary-hover: #1a6633;


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

$presszone-international-text: #0f172a;
$presszone-international-text-secondary: #334155;
$presszone-international-text-muted: #64748b;


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

$presszone-international-border: #e2e8f0;
$presszone-international-border-hover: #cbd5e1;


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

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


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

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


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

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


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

$presszone-international-info-bg: rgba(168, 199, 250, 0.1);
$presszone-international-info-border: rgba(168, 199, 250, 0.3);


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

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


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

// Overlays
$presszone-international-overlay: rgba(0, 0, 0, 0.7);
$presszone-international-overlay-light: rgba(15, 23, 42, 0.6);

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

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

$presszone-international-radius: 12px;
$presszone-international-radius-sm: 8px;
$presszone-international-radius-lg: 16px;
$presszone-international-radius-xl: 20px;
$presszone-international-radius-hairline: 2px;
$presszone-international-radius-micro: 3px;
$presszone-international-radius-xs: 4px;
$presszone-international-radius-compact: 5px;
$presszone-international-radius-control: 10px;
$presszone-international-radius-control-tall: 13px;
$presszone-international-radius-toggle: 24px;
$presszone-international-radius-pill-control: 45px;
$presszone-international-radius-pill: 100px;
$presszone-international-radius-full: 9999px;

// ==========================================================================
// CONTROL AFFORDANCES
// ==========================================================================

// Drawn rather than native: `appearance: none` is required to normalise select
// height and padding across browsers, which also removes the native arrow.
$ipz-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

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

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

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

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

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

$presszone-international-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
$presszone-international-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
$presszone-international-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$presszone-international-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);


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

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

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

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

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

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

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

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

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

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

// ==========================================================================
// LEGACY MPZ TOKENS (ipz-* 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: $presszone-international-primary !default;
$primary-hover: $presszone-international-primary-hover !default;
$secondary-color: $presszone-international-secondary !default;
$success-color: $presszone-international-success !default;
$warning-color: $presszone-international-warning !default;
$error-color: $presszone-international-error !default;
$info-color: $presszone-international-primary !default;

// Text & surfaces
$text-primary: $presszone-international-text !default;
$text-secondary: $presszone-international-text-secondary !default;
$text-light: $presszone-international-text-muted !default;
$border-color: $presszone-international-border !default;
$background-light: $presszone-international-surface-2 !default;
$background-white: $presszone-international-surface !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;

// ==========================================================================
// UNIVERSAL ADMIN SEMANTIC THEME
// ==========================================================================
// Sass maps are the single source values. Shared component CSS consumes the
// emitted custom properties so explicit body.dark-mode can switch the whole UI.

$ipz-admin-theme-light: (
    canvas: #f7f9fc,
    surface: #ffffff,
    surface-subtle: #f8fafc,
    surface-raised: #ffffff,
    text: #10213f,
    text-muted: #66758f,
    border: #dbe3ef,
    border-strong: #c6d2e3,
    primary: #1268e8,
    primary-hover: #0d56c6,
    primary-soft: #eaf2ff,
    on-primary: #ffffff,
    success: #128a58,
    success-soft: #e9f8f1,
    warning: #b96a00,
    warning-soft: #fff6e5,
    danger: #c73535,
    danger-soft: #fff0f0,
    zebra: #f8fafc,
    hover: #f1f6fd,
    focus: #1268e8,
    overlay: rgba(15, 33, 63, 0.55),
    modal-overlay: rgba(15, 33, 63, 0.28),
    shadow: 0 10px 28px rgba(34, 60, 96, 0.08),
    shadow-soft: 0 3px 12px rgba(34, 60, 96, 0.06)
);

$ipz-admin-theme-dark: (
    canvas: #101722,
    surface: #172130,
    surface-subtle: #1c2839,
    surface-raised: #202d40,
    text: #f1f5fb,
    text-muted: #a8b4c7,
    border: #35445a,
    border-strong: #4a5c75,
    primary: #6aa7ff,
    primary-hover: #8bb9ff,
    primary-soft: #213d67,
    on-primary: #08162b,
    success: #61d6a3,
    success-soft: #173d31,
    warning: #f5bd5c,
    warning-soft: #473619,
    danger: #ff8585,
    danger-soft: #4a2529,
    zebra: #1b2738,
    hover: #243349,
    focus: #8bb9ff,
    overlay: rgba(0, 0, 0, 0.72),
    modal-overlay: rgba(0, 0, 0, 0.42),
    shadow: 0 14px 34px rgba(0, 0, 0, 0.34),
    shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.24)
);

@mixin ipz-emit-admin-theme($theme) {
    @each $name, $value in $theme {
        --ipz-#{$name}: #{$value};
    }
}