// =============================================================================
// Matchplat brand tokens — SCSS variables
// Version: 1.0.0
//
// Usage: @import 'tokens';
// =============================================================================

// === COLORI BRAND ===
$mp-brand-navy: #05141e;
$mp-brand-accent: #ff2a27;
$mp-brand-accent-hover: #ff4542;
$mp-brand-accent-dark: #cc1f1d;
$mp-brand-accent-bg: rgba(255, 42, 39, 0.08);

// === TESTO (light mode) ===
$mp-text-primary: #05141e;
$mp-text-secondary: #3d5060;
$mp-text-muted: #7a8d9c;
$mp-text-disabled: #b0bfc8;
$mp-text-on-dark: #eef2f5;

// === TESTO (dark mode) ===
$mp-text-primary-dark: #eef2f5;
$mp-text-secondary-dark: #8ba3b8;
$mp-text-muted-dark: #4d6a80;
$mp-text-disabled-dark: #2d4455;

// === BACKGROUND (light mode) ===
$mp-bg-primary: #ffffff;
$mp-bg-secondary: #fafafa;
$mp-bg-tertiary: #f4f4f8;
$mp-bg-elevated: #eeeef2;
$mp-bg-interactive: #e4e4ea;

// === BACKGROUND (dark mode) ===
$mp-bg-primary-dark: #030e16;
$mp-bg-secondary-dark: #05141e;
$mp-bg-tertiary-dark: #0c1f2e;
$mp-bg-elevated-dark: #132a3a;
$mp-bg-interactive-dark: #1a3548;

// === BORDER ===
$mp-border-default: rgba(0, 0, 0, 0.08);
$mp-border-subtle: rgba(0, 0, 0, 0.04);
$mp-border-strong: rgba(0, 0, 0, 0.16);
$mp-border-default-dark: rgba(255, 255, 255, 0.06);
$mp-border-subtle-dark: rgba(255, 255, 255, 0.03);
$mp-border-strong-dark: rgba(255, 255, 255, 0.12);

// === SEMANTIC ===
$mp-success: #1d9e75;
$mp-success-bg: rgba(29, 158, 117, 0.08);
$mp-warning: #ba7517;
$mp-warning-bg: rgba(186, 117, 23, 0.08);
$mp-danger: #e24b4a;
$mp-danger-bg: rgba(226, 75, 74, 0.08);
$mp-info: #378add;
$mp-info-bg: rgba(55, 138, 221, 0.08);

// === SCORE (rilevanza Radar) ===
$mp-score-high: #5dcaa5;
$mp-score-high-bg: #04342c;
$mp-score-mid: #fac775;
$mp-score-mid-bg: #412402;
$mp-score-low: #f09595;
$mp-score-low-bg: #501313;

// === FONT ===
$mp-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
$mp-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;

$mp-font-size-xs: 11px;
$mp-font-size-sm: 13px;
$mp-font-size-base: 15px;
$mp-font-size-lg: 18px;
$mp-font-size-xl: 22px;
$mp-font-size-2xl: 28px;
$mp-font-size-3xl: 36px;

$mp-font-weight-regular: 400;
$mp-font-weight-medium: 500;

$mp-line-height-tight: 1.2;
$mp-line-height-normal: 1.5;
$mp-line-height-relaxed: 1.7;

// === SPACING ===
$mp-space-1: 4px;
$mp-space-2: 8px;
$mp-space-3: 12px;
$mp-space-4: 16px;
$mp-space-5: 20px;
$mp-space-6: 24px;
$mp-space-8: 32px;
$mp-space-10: 40px;
$mp-space-12: 48px;
$mp-space-16: 64px;

// === RADIUS ===
$mp-radius-sm: 6px;
$mp-radius-md: 10px;
$mp-radius-lg: 14px;
$mp-radius-xl: 20px;
$mp-radius-full: 9999px;

// === SHADOW ===
$mp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
$mp-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
$mp-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
$mp-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);

// === DURATION & EASING ===
$mp-duration-instant: 0ms;
$mp-duration-fast: 120ms;
$mp-duration-normal: 200ms;
$mp-duration-slow: 320ms;

$mp-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
$mp-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
$mp-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

// === BREAKPOINTS ===
$mp-breakpoint-sm: 640px;
$mp-breakpoint-md: 768px;
$mp-breakpoint-lg: 1024px;
$mp-breakpoint-xl: 1280px;

// === MIXIN UTILITY ===
@mixin mp-respond-above($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

@mixin mp-card($padding: $mp-space-4) {
  background: $mp-bg-primary;
  border: 0.5px solid $mp-border-default;
  border-radius: $mp-radius-lg;
  padding: $padding;
  box-shadow: $mp-shadow-card;
}