/* UTME Lab — semantic design tokens (:root)
 *
 * This layer maps the Tailwind `@theme` values (tailwind.css) into semantic
 * custom properties. Keeps intent in the CSS: `--color-bg-app` rather than
 * raw hex. The equivalent of shadcn's `--primary` / `--background` block.
 *
 * Loaded AFTER tailwind.css so these win the cascade for any native rules.
 */

:root {
  /* App surface */
  --color-bg-app: var(--color-surface-50);
  --color-bg-elevated: var(--color-surface-0);
  --color-border-subtle: var(--color-surface-200);
  --color-border-strong: var(--color-surface-300);

  /* Brand usage */
  --color-primary: var(--color-jamb);
  --color-primary-hover: var(--color-jamb-hover);
  --color-primary-dark: var(--color-jamb-dark);
  --color-primary-light: var(--color-jamb-light);

  /* Text */
  --color-text-strong: var(--color-ink-900);
  --color-text: var(--color-ink-700);
  --color-text-muted: var(--color-surface-500);
  --color-text-faint: var(--color-surface-400);

  /* Focus */
  --color-focus-ring: var(--color-jamb);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* ── Landing decorative animation ──────────────────────────────────────────
   Keyframes cannot be expressed as Tailwind utilities, so the only two
   animation classes for the landing page live here (loaded on every page).
   Moved from the archived pages.css `landing-float`. */
@keyframes landing-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.landing-float {
  animation: landing-float 5s ease-in-out infinite;
}

.landing-float-delay {
  animation-delay: 1.2s;
}