/**
 * Design tokens — sourced from docs/design-system.json
 * Neo Multitile Analytics OS: light canvas, modular cards, neon lime accents.
 */

:root {
  --ds-canvas: #ebeef4;
  --ds-layout-canvas: #e5e9f0;
  --ds-surface: #ffffff;
  --ds-surface-muted: #f5f7fb;
  --ds-ink-primary: #131b2b;
  --ds-ink-secondary: #5e6a80;
  --ds-ink-tertiary: #97a0b6;
  --ds-accent-blue: #4a6cff;
  --ds-accent-indigo: #6c5bff;
  --ds-accent-teal: #49d4c9;
  --ds-accent-lime: #e7ff3d;
  --ds-accent-coral: #ff6c61;
  --ds-accent-amber: #ffb448;
  --ds-accent-pink: #fe5bc7;
  --ds-success: #37c978;
  --ds-warning: #ffbf4d;
  --ds-danger: #ff4d67;
  --ds-divider: rgba(19, 27, 43, 0.08);
  --ds-shadow-raw: rgba(16, 23, 40, 0.14);

  --ds-gradient-hero: linear-gradient(135deg, #4a6cff 0%, #8c9eff 100%);
  --ds-gradient-profile: linear-gradient(135deg, #ffd36b 0%, #ff9c6a 100%);
  --ds-gradient-cta-lime: linear-gradient(135deg, #f4ff9e 0%, #d7ff3a 100%);
  --ds-gradient-media-card: linear-gradient(135deg, #232a3c 0%, #3f4e6e 100%);
  --ds-gradient-wellness: linear-gradient(135deg, #3c4afe 0%, #8d4dfe 100%);

  --ds-radius-micro: 12px;
  --ds-radius-soft: 20px;
  --ds-radius-card: 28px;
  --ds-radius-hero: 36px;
  --ds-radius-pill: 999px;

  --ds-shadow-card: 0 18px 45px rgba(19, 27, 43, 0.12);
  --ds-shadow-card-hover: 0 28px 55px rgba(19, 27, 43, 0.18);
  --ds-shadow-floating: 0 10px 30px rgba(74, 108, 255, 0.35);

  --ds-blur-frosted: 24px;
  --ds-blur-media: 14px;

  --ds-ease-micro: cubic-bezier(0.21, 0.61, 0.35, 1);
  --ds-dur-micro: 180ms;

  --ds-font-primary: "Inter", "SF Pro Display", system-ui, sans-serif;
  --ds-font-rounded: "Nunito", "Inter", system-ui, sans-serif;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;

  --ds-chart-line-1: #4a6cff;
  --ds-chart-line-2: #49d4c9;
  --ds-chart-line-3: #ff6c61;
  --ds-bar-radius: 12px;
  --ds-progress-trail: #e2e5ef;

  --ds-chip-h-sm: 34px;
  --ds-chip-h-md: 40px;
  --ds-chip-h-lg: 48px;
}

html {
  scroll-behavior: smooth;
}

body.ds-app {
  font-family: var(--ds-font-primary);
  background-color: var(--ds-layout-canvas);
  background-image:
    radial-gradient(ellipse 85% 55% at 12% -8%, rgba(74, 108, 255, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 45% at 96% 4%, rgba(231, 255, 61, 0.12), transparent 50%);
  color: var(--ds-ink-primary);
  -webkit-font-smoothing: antialiased;
}

body.ds-app ::selection {
  background: rgba(74, 108, 255, 0.22);
  color: var(--ds-ink-primary);
}

.ds-display {
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.02em;
}
.ds-headline {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ds-stat {
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
}
.ds-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
.ds-body {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.ds-caption {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}
.ds-micro {
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ds-text-primary {
  color: var(--ds-ink-primary);
}
.ds-text-secondary {
  color: var(--ds-ink-secondary);
}
.ds-text-tertiary {
  color: var(--ds-ink-tertiary);
}
.ds-text-inverse {
  color: var(--ds-surface);
}

.ds-font-rounded {
  font-family: var(--ds-font-rounded);
}

.ds-link {
  color: var(--ds-accent-blue);
  transition: color var(--ds-dur-micro) var(--ds-ease-micro);
}
.ds-link:hover {
  color: var(--ds-accent-indigo);
}

/* Top navigation — frosted bar */
.glass-nav {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(var(--ds-blur-frosted));
  -webkit-backdrop-filter: blur(var(--ds-blur-frosted));
  border-bottom: 1px solid var(--ds-divider);
}

/* Floating modular card */
.glass-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-divider);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  transition:
    transform var(--ds-dur-micro) var(--ds-ease-micro),
    box-shadow var(--ds-dur-micro) var(--ds-ease-micro),
    border-color var(--ds-dur-micro) var(--ds-ease-micro);
}
.glass-card:hover {
  box-shadow: var(--ds-shadow-card-hover);
  transform: scale(1.02);
}
.glass-card.ds-card-static:hover {
  transform: none;
  box-shadow: var(--ds-shadow-card);
}

/* Primary button — accent blue */
.btn-primary {
  background: var(--ds-accent-blue);
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-radius: var(--ds-radius-pill);
  box-shadow: 0 8px 22px rgba(74, 108, 255, 0.32);
  transition:
    transform var(--ds-dur-micro) var(--ds-ease-micro),
    box-shadow var(--ds-dur-micro) var(--ds-ease-micro),
    filter var(--ds-dur-micro) var(--ds-ease-micro);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: var(--ds-shadow-floating);
}
.btn-primary:active {
  transform: scale(0.99);
}

.btn-secondary {
  background: var(--ds-surface);
  color: var(--ds-ink-primary);
  font-weight: 600;
  border: 1px solid rgba(19, 27, 43, 0.18);
  border-radius: var(--ds-radius-pill);
  transition:
    transform var(--ds-dur-micro) var(--ds-ease-micro),
    box-shadow var(--ds-dur-micro) var(--ds-ease-micro),
    border-color var(--ds-dur-micro) var(--ds-ease-micro);
}
.btn-secondary:hover {
  border-color: rgba(19, 27, 43, 0.28);
  box-shadow: var(--ds-shadow-card);
}

.btn-cta {
  background: var(--ds-gradient-cta-lime);
  color: var(--ds-ink-primary);
  font-weight: 700;
  border: none;
  border-radius: var(--ds-radius-pill);
  box-shadow: 0 0 20px rgba(231, 255, 61, 0.55);
  transition:
    transform var(--ds-dur-micro) var(--ds-ease-micro),
    box-shadow var(--ds-dur-micro) var(--ds-ease-micro);
}
.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(231, 255, 61, 0.65);
}

.input-field {
  background: var(--ds-surface-muted);
  border: 1px solid rgba(19, 27, 43, 0.15);
  color: var(--ds-ink-primary);
  transition:
    border-color var(--ds-dur-micro) var(--ds-ease-micro),
    box-shadow var(--ds-dur-micro) var(--ds-ease-micro);
}
.input-field::placeholder {
  color: var(--ds-ink-tertiary);
}
.input-field:focus {
  outline: none;
  border-color: var(--ds-accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 108, 255, 0.2);
}

.gradient-text {
  background: var(--ds-gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-bg {
  background: var(--ds-gradient-hero);
}

/* Fixed layer: large translated glows must not expand document scroll height */
.ds-bg-effects {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ds-glow-blue {
  background: radial-gradient(circle, rgba(74, 108, 255, 0.2) 0%, transparent 68%);
}
.ds-glow-lime {
  background: radial-gradient(circle, rgba(231, 255, 61, 0.28) 0%, transparent 68%);
}

.page-shell {
  background:
    radial-gradient(circle at 18% 18%, rgba(74, 108, 255, 0.1), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(108, 91, 255, 0.08), transparent 45%),
    var(--ds-layout-canvas);
}

.brand-mark {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.45) 0%, transparent 42%),
    var(--ds-gradient-hero);
  box-shadow: var(--ds-shadow-floating);
}

.ds-stat-tile {
  background: var(--ds-surface-muted);
  border: 1px solid var(--ds-divider);
  border-radius: var(--ds-radius-soft);
}

.ds-footer {
  border-top: 1px solid var(--ds-divider);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
}

.ds-media-slab {
  background: var(--ds-gradient-media-card);
  border-radius: var(--ds-radius-card);
  border: 1px solid var(--ds-divider);
  box-shadow: var(--ds-shadow-card);
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  height: var(--ds-chip-h-md);
  padding: 0 16px;
  border-radius: var(--ds-radius-pill);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--ds-font-primary);
  background: var(--ds-surface);
  color: var(--ds-ink-primary);
  border: 1px solid rgba(19, 27, 43, 0.15);
  transition:
    background var(--ds-dur-micro) var(--ds-ease-micro),
    color var(--ds-dur-micro) var(--ds-ease-micro),
    box-shadow var(--ds-dur-micro) var(--ds-ease-micro);
}
.ds-chip-selected {
  background: var(--ds-ink-primary);
  color: var(--ds-surface);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(19, 27, 43, 0.28);
}

.ds-frosted-btn {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(var(--ds-blur-frosted));
  border: 1px solid var(--ds-divider);
  border-radius: var(--ds-radius-soft);
  box-shadow: var(--ds-shadow-card);
}

/* Hero / media card gradient panel */
.ds-hero-panel {
  background: var(--ds-gradient-hero);
  border-radius: var(--ds-radius-hero);
  box-shadow: var(--ds-shadow-floating);
}