/* Generated from Figma node 265:833 and related children */
:root {
  /* Base colors */
  --nl-color-bg: #ffffff;
  --nl-color-surface: #ffffff;
  --nl-color-text: #173751; /* from Rectangle 55 / vector fills */
  --nl-color-text-inverse: #ffffff;
  --nl-color-accent: #eeff00; /* from yellow text (id 308:285) */

  /* Typography */
  --nl-font-family-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --nl-font-size-sm: 18px;
  --nl-font-size-md: 24px;
  --nl-font-size-lg: 32px;

  /* Radii */
  --nl-radius-s: 5px; /* from frame corner radius */
}

html, body {
  background: var(--nl-color-bg);
  color: var(--nl-color-text);
  font-family: var(--nl-font-family-sans);
}

/* Utility */
.nl-text-inverse { color: var(--nl-color-text-inverse); }
.nl-accent { color: var(--nl-color-accent); }
.nl-surface {
  background: var(--nl-color-surface);
  border-radius: var(--nl-radius-s);
}

/* Glassmorphism Arrow - reusable component for sliders/carousels */
.nl-glass-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nl-glass-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.nl-glass-arrow--sm {
  width: 40px;
  height: 40px;
}

.nl-glass-arrow--dark {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
}

.nl-glass-arrow--dark:hover {
  background: rgba(0, 0, 0, 0.35);
}