/* =============================================================
   Velund Design System — tokens + semantic aliases
   ============================================================= */

/* Fonts — Google Fonts imports (substitutions flagged in README) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Quicksand:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- COLORS: raw ----- */
  /* Backgrounds */
  --vl-bg-site:      #202023; /* rgb(32,32,35) — marketing site bg */
  --vl-bg-app:       #1A1A1D; /* rgb(26,26,29) — dashboard neutral ink */
  --vl-bg-card:      #242428; /* rgb(36,36,40) — app card surface */
  --vl-bg-deep:      #16161A; /* rgb(22,22,26) — nested panel */
  --vl-bg-ink:       #242425; /* rgb(36,36,37) — near-black text on lime */
  --vl-bg-pure:      #000000;
  --vl-bg-white:     #ffffff;

  /* Signature lime */
  --vl-lime:         #E0FF1E; /* rgb(224,255,30) — primary brand */
  --vl-lime-deep:    #BCD716; /* rgb(188,215,22) — shadowed text */
  --vl-lime-glow-1:  #BAD60F;
  --vl-lime-glow-2:  #D7F51B;
  --vl-lime-text:    #C5E210; /* the "ghost" text over lime card */

  /* Neutrals */
  --vl-white:        #ffffff;
  --vl-fg-soft:      #E2E3E5; /* rgb(226,227,229) */
  --vl-fg-mute:      #BEBEBE; /* ghost outlines */
  --vl-fg-dim:       #828282;
  --vl-fg-faint:     #4E4E4E;
  --vl-stroke:       rgba(122,147,173,0.19);
  --vl-divider:      #242425;

  /* Cool blues (chart lines, accents) */
  --vl-blue-1:       #9DC4E8; /* chart lines */
  --vl-blue-2:       #508FFF; /* links / highlights */
  --vl-blue-3:       #4376AB; /* fills */
  --vl-blue-4:       #123B60; /* dark stroke */
  --vl-blue-dot:     #005AFE;
  --vl-blue-deep:    #042345;

  /* Semantic */
  --vl-success:      #09BC7C; /* rgb(9,188,124)  — in-range */
  --vl-success-alt:  #0FB581;
  --vl-tether:       #26A17B;
  --vl-green-bright: #5CEE9C;
  --vl-danger:       #D76C4A; /* coral — out of range */
  --vl-warn:         #F9D449;
  --vl-info-cyan:    #2CD8DE;

  /* Shadows */
  --vl-shadow-card:     0 4px 4px rgba(0,0,0,0.25);
  --vl-shadow-elevated: 4px 4px 8px rgba(0,0,0,0.25), -4px 4px 4px rgba(0,0,0,0.25);
  --vl-shadow-glow:     0 0.73px 3.65px rgba(255,255,255,0.10);

  /* Radii */
  --vl-r-chip:   6px;
  --vl-r-md:     8px;   /* app cards */
  --vl-r-lg:     12px;
  --vl-r-xl:     20px;  /* marketing cards */
  --vl-r-xxl:    30px;  /* ghost outline card */
  --vl-r-pill:   9999px;

  /* Spacing scale (4px base) */
  --vl-s-1:   4px;
  --vl-s-2:   8px;
  --vl-s-3:   12px;
  --vl-s-4:   16px;
  --vl-s-5:   20px;
  --vl-s-6:   24px;
  --vl-s-8:   32px;
  --vl-s-10:  40px;
  --vl-s-12:  48px;
  --vl-s-16:  64px;
  --vl-s-24:  96px;

  /* Font stacks */
  --vl-ff-display: 'Poppins', 'Space Grotesk', system-ui, sans-serif; /* @kind font */
  --vl-ff-editorial: 'Poppins', 'Space Grotesk', 'Times New Roman', serif; /* @kind font */ /* stands in for Milligram */
  --vl-ff-mark:    'Poppins', 'Space Grotesk', sans-serif; /* @kind font */ /* stands in for Gilroy Heavy */
  --vl-ff-ui:      'Quicksand', system-ui, sans-serif; /* @kind font */
  --vl-ff-data:    'Inter', system-ui, sans-serif; /* @kind font */
  --vl-ff-mono:    'Roboto Mono', ui-monospace, monospace; /* @kind font */

  /* Easings */
  --vl-ease:       cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --vl-dur-1:      150ms; /* @kind other */
  --vl-dur-2:      240ms; /* @kind other */
  --vl-dur-3:      400ms; /* @kind other */
}

/* =============================================================
   Semantic aliases — class-based so they can be applied anywhere
   ============================================================= */

/* Display / marketing */
.vl-display-xxl {
  font-family: var(--vl-ff-editorial);
  font-weight: 700;
  font-size: clamp(72px, 10vw, 150px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.vl-display-xl {
  font-family: var(--vl-ff-display);
  font-weight: 700;
  font-size: clamp(44px, 5vw, 57px);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.vl-display-lg {
  font-family: var(--vl-ff-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.vl-h1 {
  font-family: var(--vl-ff-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.vl-h2 {
  font-family: var(--vl-ff-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.vl-h3 {
  font-family: var(--vl-ff-data);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--vl-fg-soft);
}

/* Eyebrows (used above sections / deck slides) */
.vl-eyebrow {
  font-family: var(--vl-ff-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vl-fg-soft);
}

/* Body */
.vl-body {
  font-family: var(--vl-ff-data);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--vl-fg-soft);
}
.vl-body-sm {
  font-family: var(--vl-ff-data);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vl-fg-soft);
}

/* UI / dashboard */
.vl-ui-nav {
  font-family: var(--vl-ff-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}
.vl-ui-nav-active {
  font-family: var(--vl-ff-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.vl-ui-label {
  font-family: var(--vl-ff-data);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: var(--vl-fg-soft);
}
.vl-ui-label-sm {
  font-family: var(--vl-ff-data);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  color: var(--vl-fg-soft);
  text-transform: lowercase;
}
.vl-ui-value {
  font-family: var(--vl-ff-data);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--vl-white);
}
.vl-ui-value-lg {
  font-family: var(--vl-ff-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--vl-white);
  letter-spacing: -0.01em;
}

/* Chip / badge */
.vl-chip {
  font-family: var(--vl-ff-data);
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: var(--vl-r-chip);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vl-chip--success { color: var(--vl-success); }
.vl-chip--danger  { color: var(--vl-danger); }
.vl-chip--apy     { color: var(--vl-info-cyan); }

/* Code-like monospace */
.vl-code {
  font-family: var(--vl-ff-mono);
  font-size: 13px;
  color: var(--vl-fg-soft);
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Surfaces */
.vl-surface-site { background: var(--vl-bg-site); color: var(--vl-fg-soft); }
.vl-surface-app  { background: var(--vl-bg-app);  color: var(--vl-fg-soft); }
.vl-surface-card { background: var(--vl-bg-card); border-radius: var(--vl-r-md); }
.vl-surface-lime { background: var(--vl-lime); color: var(--vl-bg-ink); }

/* Buttons */
.vl-btn {
  font-family: var(--vl-ff-data);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--vl-r-md);
  border: 0;
  cursor: pointer;
  transition: background var(--vl-dur-1) var(--vl-ease), transform var(--vl-dur-1) var(--vl-ease), opacity var(--vl-dur-1) var(--vl-ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.vl-btn--primary { background: var(--vl-lime); color: var(--vl-bg-ink); }
.vl-btn--primary:hover { background: var(--vl-lime-deep); }
.vl-btn--primary:active { opacity: 0.9; }
.vl-btn--ghost { background: transparent; color: var(--vl-fg-soft); border: 1px solid var(--vl-stroke); }
.vl-btn--ghost:hover { background: rgba(255,255,255,0.07); }
.vl-btn--dark { background: var(--vl-bg-ink); color: var(--vl-white); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 1ms !important;
    transition-duration: 0s !important;
  }
}