/**
 * Matchplat brand tokens — CSS custom properties
 * Version: 1.0.0
 *
 * Usage: <link rel="stylesheet" href="https://brand.matchplat.io/tokens/tokens.css">
 * o copia il contenuto nel tuo progetto.
 *
 * Tutti i token sono esposti come CSS custom properties nel :root
 * e auto-adattano a light/dark mode via prefers-color-scheme.
 */

:root {
  /* === 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 default) === */
  --mp-text-primary: #05141e;
  --mp-text-secondary: #3d5060;
  --mp-text-muted: #7a8d9c;
  --mp-text-disabled: #b0bfc8;
  --mp-text-on-dark: #eef2f5;

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

  /* === 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);

  /* === 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 (per JS, non utilizzabili in CSS @media) === */
  --mp-breakpoint-sm: 640px;
  --mp-breakpoint-md: 768px;
  --mp-breakpoint-lg: 1024px;
  --mp-breakpoint-xl: 1280px;
}

/* === DARK MODE auto-attivo === */
@media (prefers-color-scheme: dark) {
  :root {
    --mp-text-primary: #eef2f5;
    --mp-text-secondary: #8ba3b8;
    --mp-text-muted: #4d6a80;
    --mp-text-disabled: #2d4455;

    --mp-bg-primary: #030e16;
    --mp-bg-secondary: #05141e;
    --mp-bg-tertiary: #0c1f2e;
    --mp-bg-elevated: #132a3a;
    --mp-bg-interactive: #1a3548;

    --mp-border-default: rgba(255, 255, 255, 0.06);
    --mp-border-subtle: rgba(255, 255, 255, 0.03);
    --mp-border-strong: rgba(255, 255, 255, 0.12);

    --mp-shadow-card: none;
    --mp-shadow-card-hover: none;
  }
}

/* === DARK MODE forzato (data-theme="dark") === */
[data-theme="dark"] {
  --mp-text-primary: #eef2f5;
  --mp-text-secondary: #8ba3b8;
  --mp-text-muted: #4d6a80;
  --mp-text-disabled: #2d4455;

  --mp-bg-primary: #030e16;
  --mp-bg-secondary: #05141e;
  --mp-bg-tertiary: #0c1f2e;
  --mp-bg-elevated: #132a3a;
  --mp-bg-interactive: #1a3548;

  --mp-border-default: rgba(255, 255, 255, 0.06);
  --mp-border-subtle: rgba(255, 255, 255, 0.03);
  --mp-border-strong: rgba(255, 255, 255, 0.12);

  --mp-shadow-card: none;
  --mp-shadow-card-hover: none;
}

/* === LIGHT MODE forzato (data-theme="light") === */
[data-theme="light"] {
  --mp-text-primary: #05141e;
  --mp-text-secondary: #3d5060;
  --mp-text-muted: #7a8d9c;
  --mp-text-disabled: #b0bfc8;

  --mp-bg-primary: #ffffff;
  --mp-bg-secondary: #fafafa;
  --mp-bg-tertiary: #f4f4f8;
  --mp-bg-elevated: #eeeef2;
  --mp-bg-interactive: #e4e4ea;

  --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-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --mp-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* === @media reduced motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mp-duration-fast: 0ms;
    --mp-duration-normal: 0ms;
    --mp-duration-slow: 0ms;
  }
}