:root {
  /* Brand & base colors */
  --color-primary: #4BADFF;
  --color-primary-dark: #329be0;
  --color-accent: #FFC440;
  --color-jabg: #fff;
  --color-bg-light: transparent;
  --color-text: #2c3e50;
  --color-text-light: #fff;
  --color-grey: #808080;

  /* Card palette */
  --color-card-0: #FBCBCC;
  --color-card-1: #FFC440;
  --color-card-2: #41D5BA;
  --color-card-3: #A7EAFF;
  --color-card-dark: #321D3B;

  /* Elevation & layout */
  --shadow-main: 0 2px 12px rgba(75,189,255,0.10);
  --shadow-main-strong: 0 4px 24px rgba(75,189,255,0.10);
  --radius-block: 10px;
  --gap-main: 18px;

  /* Nav tokens */
  --nav-btn-bg: #fff;
  --nav-btn-bg-hover: #f2f6f9;
  --nav-btn-bg-active: var(--color-primary);
  --nav-btn-text: var(--color-text);
  --nav-btn-text-active: #fff;
  --nav-btn-radius: 10px;
  --nav-mobile-active-bg: #d8f2ff;
  --nav-mobile-active-border: rgba(75,173,255,0.55);

  /* Global sizing tokens used by components */
  --arrow-offset: -6px;
  --arrow-hover-inset: 2px;
  --arrow-hover-grow: 8px;
  --arrow-grow-factor: 1.142857; /* (56+8)/56 ≈ 1.142857 */
  --arrow-btn-width: 56px;
  --arrow-btn-bg: rgba(255,255,255,0.65);
  --arrow-btn-bg-hover: rgba(255,255,255,0.82);

  /* Card sizing */
  --card-w: 220px;
  --card-h: 225px;
  --card-pad: 18px;
  --card-title-size: 1.35em;
  --card-desc-size: 0.85em;

  /* Full category animation durations */
  --fullcat-enter-duration: .55s;
  --fullcat-exit-duration: .48s;

  /* Mobile nav height used in layout paddings */
  --mobile-nav-height: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark-mode adjustments primarily for nav buttons/tokens */
    --nav-btn-bg: #1f2731;
    --nav-btn-bg-hover: #26313e;
    --nav-btn-text: #e6f0f7;
  }
}

/* Compact card tokens on small screens (keep central so all CSS benefits) */
@media (max-width: 700px) {
  :root {
    --card-w: 172px;
    --card-h: 175px;
    --card-pad: 8px;
    --card-title-size: 0.95em;
    --card-desc-size: 0.75em;
  }
}