/* ============================================================================
   VPSCloudHub - Design Tokens
   Single source of truth for colors, spacing, typography, radii, shadows,
   transitions. Override these vars to re-skin the whole site.

   Palette: flat accent sobrio (decisione 2026-10-24, vedi
   docs/UI-GUIDELINES.md §3.0). Niente viola, niente gradienti brand.
   - bg neutri slate (dark) / grigio perla (light)
   - un solo accent desaturato per tema
   - semantici sobri, contrasto WCAG AA

   Bootstrap CSS variables (--bs-*) are overridden here so the layout
   primitives (container, row, col, btn, card) keep working but adopt
   our palette.
   ============================================================================ */

:root {
  /* ---------- Neutrals (dark default) ---------- */
  --color-primary:        #101418;
  --color-primary-50:     #171C22;
  --color-primary-100:    #1F2630;
  --color-primary-200:    #2A333F;
  --color-primary-300:    #3A4553;

  /* ---------- Accent: blu acciaio desaturato (alias secondary) ---------- */
  --color-accent:         #4C9AFF;
  --color-accent-hover:   #6BADFF;
  --color-accent-pressed: #2F7FE0;
  --color-accent-ink:     #0A1626;
  --color-accent-soft:    rgba(76, 154, 255, 0.12);

  --color-secondary:      var(--color-accent);
  --color-secondary-50:   var(--color-accent-soft);
  --color-secondary-100:  rgba(76, 154, 255, 0.18);
  --color-secondary-200:  var(--color-accent-hover);
  --color-secondary-600:  var(--color-accent-pressed);
  --color-secondary-700:  #1F63B6;

  /* ---------- Tertiary: deprecato, non usare in UI (solo fallback) ---------- */
  --color-tertiary:       #6B7684;
  --color-tertiary-50:    rgba(107, 118, 132, 0.12);
  --color-tertiary-100:   rgba(107, 118, 132, 0.18);
  --color-tertiary-600:   #57616F;
  --color-tertiary-700:   #454E5A;

  --color-text:           #E8ECF1;
  --color-text-muted:     #9AA4B2;
  --color-text-subtle:    #6B7684;
  --color-text-inverse:   #0A1626;

  /* ---------- Semantic colors ---------- */
  --color-bg:             var(--color-primary);
  --color-bg-elevated:    var(--color-primary-50);
  --color-bg-elevated-2:  var(--color-primary-100);
  --color-bg-overlay:     rgba(16, 20, 24, 0.85);

  --color-border:         rgba(232, 236, 241, 0.09);
  --color-border-strong:  rgba(232, 236, 241, 0.18);
  --color-border-focus:   var(--color-accent);

  --color-navbar-bg:      rgba(16, 20, 24, 0.85);

  --color-link:           var(--color-accent);
  --color-link-hover:     var(--color-accent-hover);

  --color-success:        #2FA97C;
  --color-success-bg:     rgba(47, 169, 124, 0.12);
  --color-warning:        #C98A1B;
  --color-warning-bg:     rgba(201, 138, 27, 0.12);
  --color-danger:         #D95D5D;
  --color-danger-bg:      rgba(217, 93, 93, 0.12);
  --color-info:           var(--color-accent);
  --color-info-bg:        var(--color-accent-soft);

  /* ---------- Gradients: DEPRECATI (tinta unita, vedi §3.0) ---------- */
  --gradient-brand:       var(--color-accent);
  --gradient-brand-soft:  var(--color-accent-soft);
  --gradient-brand-edge:  var(--color-accent);
  --gradient-text:        var(--color-accent);

  /* ---------- Typography ---------- */
  --font-family-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono:     'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, Monaco, monospace;

  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;
  --font-size-4xl:        2.25rem;
  --font-size-5xl:        3rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-snug:     1.35;
  --line-height-normal:   1.55;
  --line-height-relaxed:  1.75;

  /* ---------- Spacing (4px scale) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Radii ---------- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ---------- Shadows (subtle on dark bg) ---------- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-glow-secondary: 0 0 24px rgba(76, 154, 255, 0.25);
  --shadow-glow-tertiary:  0 0 24px rgba(76, 154, 255, 0.12);

  /* ---------- Transitions ---------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ---------- */
  --layout-max-width:     1200px;
  --layout-narrow-width:  720px;
  --layout-gutter:        var(--space-6);
  --navbar-height:        64px;
  --footer-height:        80px;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-navbar:  1030;
  --z-overlay: 1040;
  --z-modal:   1050;
  --z-toast:   1080;
  --z-tooltip: 1090;
}

/* ============================================================================
   Bootstrap 5.3 variable overrides.
   The full grid + utilities keep working; only colors/flavor are re-themed.
   ============================================================================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg:           var(--color-bg);
  --bs-body-color:        var(--color-text);
  --bs-body-font-family:  var(--font-family-sans);
  --bs-body-font-size:    var(--font-size-base);
  --bs-body-line-height:  var(--line-height-normal);

  --bs-primary:           var(--color-accent);
  --bs-primary-rgb:       76, 154, 255;
  --bs-secondary:         var(--color-text-muted);
  --bs-secondary-rgb:     154, 164, 178;
  --bs-success:           var(--color-success);
  --bs-success-rgb:       47, 169, 124;
  --bs-info:              var(--color-info);
  --bs-info-rgb:          76, 154, 255;
  --bs-warning:           var(--color-warning);
  --bs-warning-rgb:       201, 138, 27;
  --bs-danger:            var(--color-danger);
  --bs-danger-rgb:        217, 93, 93;
  --bs-light:             var(--color-text);
  --bs-light-rgb:         232, 236, 241;
  --bs-dark:              var(--color-primary);
  --bs-dark-rgb:          16, 20, 24;

  --bs-link-color:        var(--color-link);
  --bs-link-color-rgb:    76, 154, 255;
  --bs-link-hover-color:  var(--color-link-hover);

  --bs-border-color:      var(--color-border);
  --bs-border-color-translucent: var(--color-border);

  --bs-card-bg:           var(--color-bg-elevated);
  --bs-card-color:        var(--color-text);
  --bs-card-border-color: var(--color-border);

  --bs-modal-bg:          var(--color-bg-elevated);
  --bs-modal-color:       var(--color-text);
  --bs-modal-border-color: var(--color-border);

  --bs-dropdown-bg:       var(--color-bg-elevated);
  --bs-dropdown-color:    var(--color-text);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: var(--color-bg-elevated-2);
  --bs-dropdown-link-hover-color: var(--color-text);

  --bs-nav-link-color:    var(--color-text);
  --bs-nav-link-hover-color: var(--color-secondary);

  --bs-form-control-bg:   var(--color-bg-elevated);
  --bs-form-control-color: var(--color-text);
  --bs-form-control-disabled-bg: var(--color-bg-elevated-2);

  --bs-table-bg:          transparent;
  --bs-table-color:       var(--color-text);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg:  var(--color-bg-elevated);
  --bs-table-hover-bg:    var(--color-bg-elevated-2);

  --bs-toast-bg:          var(--color-bg-elevated);
  --bs-toast-color:       var(--color-text);
  --bs-toast-border-color: var(--color-border);

  --bs-emphasis-color:    var(--color-text);
  --bs-emphasis-color-rgb: 226, 232, 240;
  --bs-heading-color:     var(--color-text);

  --bs-tertiary-bg:       var(--color-bg-elevated-2);
  --bs-secondary-bg:      var(--color-bg-elevated);
}

/* ============================================================================
   Light theme override.
   Set html[data-theme="light"] (or body[data-theme="light"] for backward
   compatibility) to switch the whole site to a light background.
   Dark is the default (no override needed at :root level).
   All other CSS reads from var(--color-*) so this re-skins every page
   and every module.
   ============================================================================ */
html[data-theme="light"],
body[data-theme="light"] {
  --color-primary:        #F4F6F8;
  --color-primary-50:     #FFFFFF;
  --color-primary-100:    #E8ECF0;
  --color-primary-200:    #D5DCE3;
  --color-primary-300:    #B9C3CE;

  --color-accent:         #1F6FDE;
  --color-accent-hover:   #3B84E5;
  --color-accent-pressed: #1859B4;
  --color-accent-ink:     #FFFFFF;
  --color-accent-soft:    rgba(31, 111, 222, 0.10);

  --color-text:           #16202B;
  --color-text-muted:     #4A5766;
  --color-text-subtle:    #6E7B8A;
  --color-text-inverse:   #FFFFFF;

  --color-bg:             var(--color-primary);
  --color-bg-elevated:    var(--color-primary-50);
  --color-bg-elevated-2:  var(--color-primary-100);
  --color-bg-overlay:     rgba(244, 246, 248, 0.92);

  --color-border:         rgba(22, 32, 43, 0.12);
  --color-border-strong:  rgba(22, 32, 43, 0.20);
  --color-border-focus:   var(--color-accent);

  --color-navbar-bg:      rgba(255, 255, 255, 0.92);

  --color-link:           var(--color-accent);
  --color-link-hover:     var(--color-accent-hover);

  --color-success:        #1F8A5B;
  --color-success-bg:     rgba(31, 138, 91, 0.10);
  --color-warning:        #9A6B0F;
  --color-warning-bg:     rgba(154, 107, 15, 0.10);
  --color-danger:         #C14A4A;
  --color-danger-bg:      rgba(193, 74, 74, 0.10);
  --color-info:           var(--color-accent);
  --color-info-bg:        var(--color-accent-soft);

  --bs-body-bg:           #F4F6F8;
  --bs-body-color:        #16202B;
}