/* ========================
       Global Variables & Design System
       ======================== */
:root {
    /* ===== Base Hues ===== */
    --hue-primary: 203;
    --hue-secondary: 228;
    --hue-neutral: 159;

    --hue-base: 160;
    --hue-primary: var(--hue-base);
    --hue-secondary: calc(var(--hue-base) + 30);
    --hue-neutral: calc(var(--hue-base) + 60);

    /* ===== Base Chroma ===== */
    --chroma-strong: 0.18;
    --chroma-medium: 0.12;
    --chroma-muted: 0.04;

    /* ===== Base Lightness ===== */
    --lightness-base: 0.6;

    /* ===== Derived Colors ===== */
    /* Primary */
    --color-primary: oklch(var(--lightness-base) var(--chroma-strong) var(--hue-primary));
    --color-primary-light: oklch(calc(var(--lightness-base) + 0.15) var(--chroma-medium) var(--hue-primary));
    --color-primary-dark: oklch(calc(var(--lightness-base) - 0.15) var(--chroma-strong) var(--hue-primary));

    /* Secondary */
    --color-secondary: oklch(var(--lightness-base) var(--chroma-strong) var(--hue-secondary));
    --color-secondary-light: oklch(calc(var(--lightness-base) + 0.15) var(--chroma-medium) var(--hue-secondary));
    --color-secondary-dark: oklch(calc(var(--lightness-base) - 0.15) var(--chroma-strong) var(--hue-secondary));

    /* Neutral */
    --color-neutral-bg: oklch(calc(var(--lightness-base) + 0.35) var(--chroma-muted) var(--hue-neutral));
    --color-neutral-border: oklch(calc(var(--lightness-base) - 0.25) var(--chroma-muted) var(--hue-neutral));
    --color-neutral-text: oklch(calc(var(--lightness-base) - 0.4) var(--chroma-muted) var(--hue-neutral));
    --color-neutral-text-light: oklch(calc(var(--lightness-base) + 0.5) var(--chroma-muted) var(--hue-neutral));
    /* other colors */
    --accent: oklch(var(--lightness-base) var(--chroma-strong) calc(var(--hue-primary) + 30));
    --accent-light: oklch(calc(var(--lightness-base) + 0.15) var(--chroma-medium) calc(var(--hue-primary) + 30));
    --accent-dark: oklch(calc(var(--lightness-base) - 0.15) var(--chroma-strong) calc(var(--hue-primary) + 30));

    /* Tiles */
    --tile-radius: 8px;
    --tile-padding: 16px;
    --tile-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Fonts */
    --font-family: system-ui, sans-serif;
}


/* ========================
   Global Styles
   ======================== */
body {
    font-family: var(--font-family);
    color: var(--color-neutral-text);
    background-color: var(--color-neutral-bg);
    padding: 16px;
}

/* ========================
   Navbar Styles
   ======================== */
.navbar {
    display: flex;
    justify-content: center;
    gap: 24px;
    background-color: var(--color-neutral-bg);
    border: 1px solid var(--color-neutral-border);
    border-radius: var(--tile-radius);
    padding: var(--tile-padding);
    box-shadow: var(--tile-shadow);
    max-width: 600px;
    margin: 2rem auto;
    font-family: var(--font-family);
}

.navbar .nav-link {
    color: var(--color-neutral-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
    margin: 5px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--color-primary-light);
    transform: scale(1.05);
    outline: none;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 600px) {
    .navbar {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 90%;
        padding: 12px;
    }

    .navbar .nav-link {
        font-size: 1.1rem;
    }
}

.interactive-number {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative; /* Needed for tooltip positioning */
  font-weight: 500;
  color: #2a2a2a;
}

.info-icon {
  font-size: 0.8em;
  margin-left: 2px;
  display: inline-block;
  color: #555;
  position: relative;
}

.tooltip {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 1em;
  white-space: nowrap;

  /* Position above the icon */
  position: absolute;
  bottom: 125%; 
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Arrow below the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.info-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
}