@import url("/assets/design-tokens.css");

/* LaurenceYang compatibility aliases keep the existing UI logic and component structure. */
:root {
  --bg: var(--jr-color-background) !important;
  --surface: var(--jr-color-surface) !important;
  --surface-2: var(--jr-color-surface-subtle) !important;
  --surface-3: var(--jr-color-primary-soft) !important;
  --line: var(--jr-color-border) !important;
  --line-hi: var(--jr-color-border-strong) !important;
  --ink: var(--jr-color-text) !important;
  --dim: var(--jr-color-text-muted) !important;
  --faint: var(--jr-color-text-muted) !important;
  --gold: var(--jr-color-primary) !important;
  --gold-d: var(--jr-color-primary-hover) !important;
  --sage: var(--jr-color-positive) !important;
  --sage-d: var(--jr-green-800) !important;
  --clay: var(--jr-color-negative) !important;
  --clay-d: var(--jr-red-700) !important;
  --sky: var(--jr-color-info) !important;
  --plum: var(--jr-violet-600) !important;
  --rose: var(--jr-red-500) !important;
  --ff-serif: var(--jr-font-serif) !important;
  --ff-sans: var(--jr-font-sans) !important;
  --ff-mono: var(--jr-font-mono) !important;
}

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
}

body {
  font-family: var(--jr-font-sans) !important;
  text-rendering: optimizeLegibility;
}

body::before {
  background:
    radial-gradient(circle at 86% -8%, rgb(67 156 109 / 0.14), transparent 36rem),
    radial-gradient(circle at -8% 88%, rgb(159 213 179 / 0.11), transparent 32rem) !important;
}

:focus-visible {
  outline: 3px solid var(--jr-color-focus) !important;
  outline-offset: 3px !important;
}

button,
a,
input,
select,
summary {
  touch-action: manipulation;
}

button,
a.btn,
nav a,
[role="button"] {
  min-height: 44px;
}

button:not(:disabled),
a[href],
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button,
.btn,
.card,
.kpi,
.panel {
  transition-duration: var(--jr-duration-fast) !important;
}

table,
.mono,
[data-number] {
  font-variant-numeric: tabular-nums;
}

.jr-skip-link {
  position: fixed;
  left: var(--jr-space-4);
  top: var(--jr-space-4);
  z-index: 100000;
  transform: translateY(-180%);
  border-radius: var(--jr-radius-md);
  background: var(--jr-color-surface-strong);
  color: var(--jr-color-text-on-strong);
  padding: var(--jr-space-3) var(--jr-space-4);
}

.jr-skip-link:focus {
  transform: translateY(0);
}

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

@media (max-width: 480px) {
  body { font-size: 16px; }
}