/* ==========================================================================
   Upraj Solutions — Theme Tokens & Base Typography
   Non-destructive layer. Loads AFTER Bootstrap + existing style.min.css
   ========================================================================== */

/* -------- Fonts (Inter + Manrope for a corporate-clean, non-generic feel) -- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  /* Brand blues — extended from existing #0044ff / #00b7ff palette */
  --u-blue-50:   #eef4ff;
  --u-blue-100:  #dbe6ff;
  --u-blue-200:  #b6cbff;
  --u-blue-300:  #86a8ff;
  --u-blue-400:  #4d7dff;
  --u-blue-500:  #0044ff;   /* PRIMARY */
  --u-blue-600:  #0035cc;
  --u-blue-700:  #002a9e;
  --u-blue-800:  #001f75;
  --u-cyan-400:  #00b7ff;   /* Accent gradient stop */
  --u-cyan-300:  #7ad6ff;
  --u-accent:    #f5b301;   /* Warm accent (retains existing warning-yellow feel) */

  /* Semantic */
  --u-success:   #10b981;
  --u-warning:   #f59e0b;
  --u-danger:    #ef4444;
  --u-info:      #0ea5e9;

  /* Surfaces — LIGHT (default) */
  --u-bg:            #f4f7ff;
  --u-bg-soft:       #eaf1ff;
  --u-surface:       #ffffff;
  --u-surface-2:     #f8faff;
  --u-border:        #e3e9f5;
  --u-border-strong: #ced7ea;

  /* Text */
  --u-text:        #0f172a;
  --u-text-soft:   #334155;
  --u-text-muted:  #64748b;
  --u-text-invert: #ffffff;

  /* Glass — balanced frosted look */
  --u-glass-bg:      rgba(255, 255, 255, 0.62);
  --u-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --u-glass-border:  rgba(255, 255, 255, 0.55);
  --u-glass-blur:    18px;
  --u-glass-tint:    rgba(0, 68, 255, 0.06);

  /* Spacing scale — 8px */
  --u-space-1: 4px;
  --u-space-2: 8px;
  --u-space-3: 12px;
  --u-space-4: 16px;
  --u-space-5: 24px;
  --u-space-6: 32px;
  --u-space-7: 48px;
  --u-space-8: 64px;

  /* Radii */
  --u-radius-xs: 6px;
  --u-radius-sm: 10px;
  --u-radius-md: 14px;
  --u-radius-lg: 20px;
  --u-radius-xl: 28px;
  --u-radius-pill: 999px;

  /* Shadows — softer, layered */
  --u-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --u-shadow-sm: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --u-shadow-md: 0 10px 24px -8px rgba(15, 23, 42, .12), 0 4px 8px -2px rgba(15, 23, 42, .06);
  --u-shadow-lg: 0 24px 48px -12px rgba(0, 68, 255, .18), 0 8px 16px -4px rgba(15, 23, 42, .08);
  --u-shadow-glow: 0 0 0 3px rgba(0, 68, 255, .15);

  /* Motion */
  --u-ease:      cubic-bezier(.2, .8, .2, 1);
  --u-dur-fast:  140ms;
  --u-dur:       220ms;
  --u-dur-slow:  360ms;

  /* Layout */
  --u-nav-h: 56px;
  --u-sidebar-w: 260px;
  --u-sidebar-w-collapsed: 74px;

  /* Type scale */
  --u-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --u-font-display: 'Manrope', 'Inter', system-ui, sans-serif;
}

/* -------- DARK MODE overrides -------- */
html[data-theme="dark"] {
  --u-bg:            #0a1229;
  --u-bg-soft:       #0e1737;
  --u-surface:       #121c3d;
  --u-surface-2:     #172449;
  --u-border:        rgba(255, 255, 255, .08);
  --u-border-strong: rgba(255, 255, 255, .16);

  --u-text:        #e8eeff;
  --u-text-soft:   #c6d0ea;
  --u-text-muted:  #8b98bd;
  --u-text-invert: #0a1229;

  --u-glass-bg:        rgba(18, 28, 61, 0.55);
  --u-glass-bg-strong: rgba(18, 28, 61, 0.72);
  --u-glass-border:    rgba(255, 255, 255, 0.10);
  --u-glass-tint:      rgba(0, 183, 255, 0.08);

  --u-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --u-shadow-sm: 0 4px 12px rgba(0, 0, 0, .4);
  --u-shadow-md: 0 12px 28px -8px rgba(0, 0, 0, .55);
  --u-shadow-lg: 0 24px 56px -12px rgba(0, 30, 100, .55);
}

/* -------- BASE — non-destructive: only sets properties existing rules missed */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--u-font-body) !important;
  background: var(--u-bg) !important;
  color: var(--u-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  transition: background var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
  /* The global navbar is fixed; reserve its exact height on every page. */
  padding-top: var(--u-nav-h);
}

/* Ambient gradient background (very subtle, only when logged into shell pages) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 68, 255, .08), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(0, 183, 255, .07), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(0, 68, 255, .05), transparent 60%);
  pointer-events: none;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 183, 255, .10), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(0, 68, 255, .18), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(0, 183, 255, .06), transparent 60%);
}

h1, h2, h3, h4, h5, .u-display {
  font-family: var(--u-font-display);
  letter-spacing: -0.02em;
  color: var(--u-text);
}

/* Text helpers — layer on top of Bootstrap */
.text-muted { color: var(--u-text-muted) !important; }
.text-primary { color: var(--u-blue-500) !important; }

/* Focus ring — accessible */
:where(button, .btn, a, input, textarea, select, .form-control, .form-select):focus-visible {
  outline: none !important;
  box-shadow: var(--u-shadow-glow) !important;
  border-color: var(--u-blue-500) !important;
}

/* Selection */
::selection {
  background: rgba(0, 68, 255, .18);
  color: var(--u-text);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--u-blue-300), var(--u-blue-500));
  border-radius: var(--u-radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--u-blue-600); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}