/* UGREEN Nepal — design tokens
 * Single source of truth for brand colors, type, spacing, motion.
 * Imported first in Layout.astro so vendor theme CSS can override
 * specific cases when needed, but new components should consume these. */

:root {
  /* Brand palette */
  --ug-green: #00a651;
  --ug-green-deep: #0a4f38;
  --ug-green-soft: #03f2a6;
  --ug-ink: #131414;
  --ug-ink-soft: #333333;
  --ug-muted: #6b7280;
  --ug-line: #e5e7eb;
  --ug-bg: #ffffff;
  --ug-bg-soft: #f8f8f9;
  --ug-bg-dark: #000000;

  /* Typography */
  --ug-font-display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ug-font-body: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radii */
  --ug-radius-sm: 4px;
  --ug-radius-md: 8px;
  --ug-radius-lg: 12px;
  --ug-radius-pill: 999px;

  /* Shadows */
  --ug-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ug-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --ug-shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.10);

  /* Motion */
  --ug-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ug-dur-fast: 150ms;
  --ug-dur: 250ms;

  /* Layout */
  --ug-container: 1200px;
  --ug-container-wide: 1400px;
  --ug-gutter: clamp(16px, 4vw, 32px);
}

/* Sensible base for new components — vendor theme CSS still owns
 * the homepage chrome, so we don't reset its body/box-sizing. */
.ug-stack > * + * { margin-top: var(--ug-gap, 16px); }

.ug-container {
  width: 100%;
  max-width: var(--ug-container);
  margin-inline: auto;
  padding-inline: var(--ug-gutter);
}

.ug-container--wide { max-width: var(--ug-container-wide); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}