/* Presago Design System — Tokens
 * Single source of truth. Non usare hex direttamente in primitives/elements.
 * Naming: --presago-{category}-{property}-{variant}[-{state}] */

:root {
  color-scheme: light;

  /* ─── Color · Background ─────────────────────────── */
  --presago-color-background-page: #F7F6F2;
  --presago-color-background-ui: #EFEEE9;
  --presago-color-background-raised: #FFFEFA;
  --presago-color-background-overlay: #FFFEFA;

  /* ─── Color · Text ───────────────────────────────── */
  --presago-color-text-default: #181816;
  --presago-color-text-subtle: #5F5D56;
  --presago-color-text-disabled: #9B9890;
  --presago-color-text-selected: #0B6F74;
  --presago-color-text-brand: #0B6F74;
  --presago-color-text-success: #166534;
  --presago-color-text-warning: #92400E;
  --presago-color-text-danger: #991B1B;
  --presago-color-text-info: #0E7490;

  --presago-color-text-on-primary: #FFFFFF;
  --presago-color-text-on-secondary: #181816;
  --presago-color-text-on-success: #FFFFFF;
  --presago-color-text-on-warning: #FFFFFF;
  --presago-color-text-on-danger: #FFFFFF;
  --presago-color-text-on-info: #FFFFFF;

  /* ─── Color · Icon ───────────────────────────────── */
  --presago-color-icon-default: #3F3D38;
  --presago-color-icon-subtle: #706D65;
  --presago-color-icon-disabled: #9B9890;
  --presago-color-icon-brand: #0B6F74;
  --presago-color-icon-success: #166534;
  --presago-color-icon-warning: #92400E;
  --presago-color-icon-danger: #991B1B;
  --presago-color-icon-info: #0E7490;

  --presago-color-icon-on-primary: #FFFFFF;
  --presago-color-icon-on-secondary: #181816;
  --presago-color-icon-on-success: #FFFFFF;
  --presago-color-icon-on-warning: #FFFFFF;
  --presago-color-icon-on-danger: #FFFFFF;
  --presago-color-icon-on-info: #FFFFFF;

  /* ─── Color · Item (interactive fills) ───────────── */
  --presago-color-item-disabled: #DAD8D1;

  --presago-color-accent-idle: #0D8187;
  --presago-color-accent-hover: #0B6F74;
  --presago-color-accent-pressed: #07585C;

  --presago-color-item-primary-idle: var(--presago-color-accent-idle);
  --presago-color-item-primary-hover: var(--presago-color-accent-hover);
  --presago-color-item-primary-pressed: var(--presago-color-accent-pressed);
  --presago-color-item-primary-selected: var(--presago-color-accent-pressed);
  --presago-color-item-primary-hover-selected: #064D50;
  --presago-color-item-primary-focused: var(--presago-color-accent-idle);

  --presago-color-item-secondary-idle: #DAD8D1;
  --presago-color-item-secondary-hover: #C9C6BD;
  --presago-color-item-secondary-pressed: #A5A197;
  --presago-color-item-secondary-selected: #C9C6BD;
  --presago-color-item-secondary-hover-selected: #A5A197;
  --presago-color-item-secondary-focused: #DAD8D1;

  --presago-color-item-success-idle: #166534;
  --presago-color-item-success-hover: #14532D;
  --presago-color-item-success-pressed: #052E16;
  --presago-color-item-success-selected: #14532D;
  --presago-color-item-success-hover-selected: #052E16;
  --presago-color-item-success-focused: #166534;

  --presago-color-item-warning-idle: #92400E;
  --presago-color-item-warning-hover: #78350F;
  --presago-color-item-warning-pressed: #451A03;
  --presago-color-item-warning-selected: #78350F;
  --presago-color-item-warning-hover-selected: #451A03;
  --presago-color-item-warning-focused: #92400E;

  --presago-color-item-danger-idle: #DC2626;
  --presago-color-item-danger-hover: #B91C1C;
  --presago-color-item-danger-pressed: #7F1D1D;
  --presago-color-item-danger-selected: #B91C1C;
  --presago-color-item-danger-hover-selected: #7F1D1D;
  --presago-color-item-danger-focused: #DC2626;

  --presago-color-item-info-idle: #0E7490;
  --presago-color-item-info-hover: #155E75;
  --presago-color-item-info-pressed: #164E63;
  --presago-color-item-info-selected: #155E75;
  --presago-color-item-info-hover-selected: #164E63;
  --presago-color-item-info-focused: #0E7490;

  /* ─── Color · Link ───────────────────────────────── */
  --presago-color-link-idle: #0B6F74;
  --presago-color-link-hover: #07585C;
  --presago-color-link-pressed: #064D50;
  --presago-color-link-visited: #7C3AED;
  --presago-color-link-visited-pressed: #5B21B6;
  --presago-color-link-focused: var(--presago-color-accent-idle);

  /* ─── Color · Border ─────────────────────────────── */
  --presago-color-border-default: #DAD8D1;
  --presago-color-border-disabled: #DAD8D1;
  --presago-color-border-focused: var(--presago-color-accent-idle);
  --presago-color-border-input: #706D65;
  --presago-color-border-selected: var(--presago-color-accent-idle);
  --presago-color-border-brand: #0B6F74;
  --presago-color-border-success: #166534;
  --presago-color-border-warning: #92400E;
  --presago-color-border-danger: #DC2626;
  --presago-color-border-info: #0E7490;

  /* ─── Font · Family ──────────────────────────────── */
  --presago-font-family-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --presago-font-family-heading: var(--presago-font-family-body);
  --presago-font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ─── Font · Size · Heading ──────────────────────── */
  --presago-font-size-heading-h1: 2.25rem;   /* 36px */
  --presago-font-size-heading-h2: 1.875rem;  /* 30px */
  --presago-font-size-heading-h3: 1.5rem;    /* 24px */
  --presago-font-size-heading-h4: 1.25rem;   /* 20px */
  --presago-font-size-heading-h5: 1.125rem;  /* 18px */
  --presago-font-size-heading-h6: 1rem;      /* 16px */

  /* ─── Font · Size · Body (5 taglie, match Mantine) ─ */
  --presago-font-size-body-xs: 0.75rem;      /* 12px */
  --presago-font-size-body-sm: 0.875rem;     /* 14px */
  --presago-font-size-body-md: 1rem;         /* 16px */
  --presago-font-size-body-lg: 1.125rem;     /* 18px */
  --presago-font-size-body-xl: 1.25rem;      /* 20px */

  /* ─── Font · Weight ──────────────────────────────── */
  --presago-font-weight-light: 300;
  --presago-font-weight-regular: 400;
  --presago-font-weight-medium: 500;
  --presago-font-weight-semibold: 600;
  --presago-font-weight-bold: 700;

  /* ─── Line height · Body ─────────────────────────── */
  --presago-line-height-xs: 1.25;
  --presago-line-height-sm: 1.4;
  --presago-line-height-md: 1.5;
  --presago-line-height-lg: 1.6;
  --presago-line-height-xl: 1.7;

  /* ─── Line height · Heading ──────────────────────── */
  --presago-line-height-heading-h1: 1.2;
  --presago-line-height-heading-h2: 1.25;
  --presago-line-height-heading-h3: 1.3;
  --presago-line-height-heading-h4: 1.35;
  --presago-line-height-heading-h5: 1.4;
  --presago-line-height-heading-h6: 1.45;

  /* ─── Letter spacing ─────────────────────────────── */
  --presago-letter-spacing-tight: -0.01em;
  --presago-letter-spacing-normal: 0;
  --presago-letter-spacing-wide: 0.01em;

  /* ─── Spacing (numerici + alias semantici) ───────── */
  --presago-spacing-0: 0;
  --presago-spacing-025: 2px;
  --presago-spacing-050: 4px;
  --presago-spacing-075: 6px;
  --presago-spacing-100: 8px;
  --presago-spacing-150: 12px;
  --presago-spacing-200: 16px;
  --presago-spacing-250: 20px;
  --presago-spacing-300: 24px;
  --presago-spacing-400: 32px;
  --presago-spacing-500: 40px;
  --presago-spacing-600: 48px;
  --presago-spacing-800: 64px;
  --presago-spacing-1000: 80px;

  /* Alias semantici (identici ai numerici, non varianti) */
  --presago-spacing-none: var(--presago-spacing-0);
  --presago-spacing-ultratight: var(--presago-spacing-050);
  --presago-spacing-tight: var(--presago-spacing-100);
  --presago-spacing-medium: var(--presago-spacing-200);
  --presago-spacing-wide: var(--presago-spacing-300);
  --presago-spacing-ultrawide: var(--presago-spacing-400);
  --presago-spacing-x-ultrawide: var(--presago-spacing-600);
  --presago-spacing-xx-ultrawide: var(--presago-spacing-800);

  /* ─── Radius ─────────────────────────────────────── */
  --presago-radius-none: 0;
  --presago-radius-xs: 2px;
  --presago-radius-sm: 4px;
  --presago-radius-md: 6px;
  --presago-radius-lg: 8px;
  --presago-radius-xl: 12px;
  --presago-radius-full: 9999px;

  /* ─── Border width ───────────────────────────────── */
  --presago-border-width-none: 0;
  --presago-border-width-thin: 1px;
  --presago-border-width-thick: 2px;

  /* ─── Focus ring ─────────────────────────────────── */
  --presago-focus-ring-width: 2px;
  --presago-focus-ring-offset: 2px;

  /* ─── Motion ─────────────────────────────────────── */
  --presago-motion-duration-fast: 120ms;
  --presago-motion-duration-base: 160ms;
  --presago-motion-duration-slow: 220ms;
  --presago-motion-duration-spin: 600ms;
  --presago-motion-duration-toast: 2s;
  --presago-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --presago-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --presago-motion-easing-linear: linear;

  /* ─── Shadow ─────────────────────────────────────── */
  --presago-shadow-xs: 0 1px 2px rgba(24, 24, 22, 0.05);
  --presago-shadow-sm: 0 1px 3px rgba(24, 24, 22, 0.1), 0 1px 2px rgba(24, 24, 22, 0.06);
  --presago-shadow-md: 0 4px 6px -1px rgba(24, 24, 22, 0.1), 0 2px 4px -2px rgba(24, 24, 22, 0.1);
  --presago-shadow-lg: 0 10px 15px -3px rgba(24, 24, 22, 0.1), 0 4px 6px -4px rgba(24, 24, 22, 0.1);
  --presago-shadow-xl: 0 20px 25px -5px rgba(24, 24, 22, 0.15), 0 8px 10px -6px rgba(24, 24, 22, 0.1);
  --presago-shadow-drag: var(--presago-shadow-lg);
}

/* ════════════════════════════════════════════════════
 * Dark theme — override solo dei color tokens
 * (tipografia, spacing, radius, shadow restano invariati)
 * ════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --presago-color-background-page: #151412;
  --presago-color-background-ui: #201F1C;
  --presago-color-background-raised: #2A2925;
  --presago-color-background-overlay: #201F1C;

  --presago-color-text-default: #F4F1EA;
  --presago-color-text-subtle: #B7B2A8;
  --presago-color-text-disabled: #817B70;
  --presago-color-text-selected: #14BFC8;
  --presago-color-text-brand: #14BFC8;
  --presago-color-text-success: #4ADE80;
  --presago-color-text-warning: #FBBF24;
  --presago-color-text-danger: #F87171;
  --presago-color-text-info: #67E8F9;

  --presago-color-icon-default: #D1CCC2;
  --presago-color-icon-subtle: #B7B2A8;
  --presago-color-icon-disabled: #817B70;
  --presago-color-icon-brand: #14BFC8;
  --presago-color-icon-success: #4ADE80;
  --presago-color-icon-warning: #FBBF24;
  --presago-color-icon-danger: #F87171;
  --presago-color-icon-info: #67E8F9;

  --presago-color-item-disabled: #3A3832;

  --presago-color-item-secondary-idle: #3A3832;
  --presago-color-item-secondary-hover: #4A4740;
  --presago-color-item-secondary-pressed: #625E55;
  --presago-color-item-secondary-selected: #4A4740;
  --presago-color-item-secondary-hover-selected: #625E55;
  --presago-color-item-secondary-focused: #3A3832;
  --presago-color-text-on-secondary: #F4F1EA;
  --presago-color-icon-on-secondary: #F4F1EA;

  --presago-color-link-idle: #14BFC8;
  --presago-color-link-hover: #55DCE3;
  --presago-color-link-pressed: #14BFC8;
  --presago-color-link-visited: #A78BFA;
  --presago-color-link-visited-pressed: #8B5CF6;
  --presago-color-link-focused: #14BFC8;

  --presago-color-border-default: #3A3832;
  --presago-color-border-disabled: #3A3832;
  --presago-color-border-focused: #14BFC8;
  --presago-color-border-input: #706D65;
  --presago-color-border-selected: #14BFC8;
  --presago-color-border-brand: #14BFC8;
  --presago-color-border-success: #4ADE80;
  --presago-color-border-warning: #FBBF24;
  --presago-color-border-danger: #F87171;
  --presago-color-border-info: #67E8F9;

  --presago-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --presago-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --presago-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --presago-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --presago-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
}

/* ════════════════════════════════════════════════════
 * Reset minimale (solo quello che serve a primitives)
 * ════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--presago-font-family-body);
  font-size: var(--presago-font-size-body-md);
  line-height: var(--presago-line-height-md);
  color: var(--presago-color-text-default);
  background-color: var(--presago-color-background-page);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
}

/* Focus-visible ring unificato per tutti gli interattivi */
:focus-visible {
  outline: var(--presago-focus-ring-width) solid var(--presago-color-border-focused);
  outline-offset: var(--presago-focus-ring-offset);
}

/* Rimuovi outline default quando focus-visible è supportato */
:focus:not(:focus-visible) {
  outline: none;
}

/* Rispetta prefers-reduced-motion globalmente */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}