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

   Palette: 60/30/10 rule
   - 60%  primary   (backgrounds, surfaces)  #0B0C10
   - 30%  secondary (links, gradient start)  #38BDF8
   - 10%  tertiary  (gradient end, accents)  #A855F7
   - text                                  #E2E8F0

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

:root {
  /* ---------- Brand palette ---------- */
  --color-primary:        #0B0C10;
  --color-primary-50:     #15171F;
  --color-primary-100:    #1E2029;
  --color-primary-200:    #2A2D38;
  --color-primary-300:    #3A3D49;

  --color-secondary:      #38BDF8;
  --color-secondary-50:   #E0F4FE;
  --color-secondary-100:  #B3E5FC;
  --color-secondary-200:  #7DD3FC;
  --color-secondary-600:  #0EA5E9;
  --color-secondary-700:  #0284C7;

  --color-tertiary:       #A855F7;
  --color-tertiary-50:    #F3E8FF;
  --color-tertiary-100:   #E9D5FF;
  --color-tertiary-600:   #9333EA;
  --color-tertiary-700:   #7E22CE;

  --color-text:           #E2E8F0;
  --color-text-muted:     #94A3B8;
  --color-text-subtle:    #64748B;
  --color-text-inverse:   #0B0C10;

  /* ---------- 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(11, 12, 16, 0.85);

  --color-border:         rgba(226, 232, 240, 0.08);
  --color-border-strong:  rgba(226, 232, 240, 0.16);
  --color-border-focus:   var(--color-secondary);

  --color-link:           var(--color-secondary);
  --color-link-hover:     var(--color-secondary-200);

  --color-success:        #10B981;
  --color-success-bg:     rgba(16, 185, 129, 0.12);
  --color-warning:        #F59E0B;
  --color-warning-bg:     rgba(245, 158, 11, 0.12);
  --color-danger:         #EF4444;
  --color-danger-bg:      rgba(239, 68, 68, 0.12);
  --color-info:           var(--color-secondary);
  --color-info-bg:        rgba(56, 189, 248, 0.12);

  /* ---------- Gradients (secondary -> tertiary) ---------- */
  --gradient-brand:       linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
  --gradient-brand-soft:  linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
  --gradient-brand-edge:  linear-gradient(90deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
  --gradient-text:        linear-gradient(90deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);

  /* ---------- 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(56, 189, 248, 0.35);
  --shadow-glow-tertiary:  0 0 24px rgba(168, 85, 247, 0.35);

  /* ---------- 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-secondary);
  --bs-primary-rgb:       56, 189, 248;
  --bs-secondary:         var(--color-tertiary);
  --bs-secondary-rgb:     168, 85, 247;
  --bs-success:           var(--color-success);
  --bs-success-rgb:       16, 185, 129;
  --bs-info:              var(--color-info);
  --bs-info-rgb:          56, 189, 248;
  --bs-warning:           var(--color-warning);
  --bs-warning-rgb:       245, 158, 11;
  --bs-danger:            var(--color-danger);
  --bs-danger-rgb:        239, 68, 68;
  --bs-light:             var(--color-text);
  --bs-light-rgb:         226, 232, 240;
  --bs-dark:              var(--color-primary);
  --bs-dark-rgb:          11, 12, 16;

  --bs-link-color:        var(--color-link);
  --bs-link-color-rgb:    56, 189, 248;
  --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:        #F1F5F9;
  --color-primary-50:     #FFFFFF;
  --color-primary-100:    #F8FAFC;
  --color-primary-200:    #E2E8F0;
  --color-primary-300:    #CBD5E1;

  --color-text:           #0F172A;
  --color-text-muted:     #475569;
  --color-text-subtle:    #64748B;
  --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-border:         rgba(15, 23, 42, 0.12);
  --color-border-strong:  rgba(15, 23, 42, 0.20);

  --bs-body-bg:           #F1F5F9;
  --bs-body-color:        #0F172A;
}