:root {
  /* YyHoop website brand tokens */
  --ink: #17201a;
  --muted: #5f6b62;
  --light: #f6f4ee;
  --soft: #e8e1d4;
  --field: #5f7a55;
  --field-dark: #385134;
  --sand: #d8c8aa;
  --white: #ffffff;
  --line: rgba(23, 32, 26, 0.12);
  --shadow: 0 24px 70px rgba(23, 32, 26, 0.14);
  --radius: 24px;
  --max: 1180px;

  /* Decision Center chrome accents (FileRelay-inspired; not semantic money colors) */
  --accent-lime: #84cc16;
  --accent-gold: #fbbf24;
  --accent-orange: #f59a14;

  /* Decision Engine semantic aliases */
  --color-brand-900: var(--ink);
  --color-brand-800: var(--field-dark);
  --color-brand-700: var(--field);
  --color-accent-600: #9c7441;
  --color-accent-100: rgba(216, 200, 170, 0.24);
  --color-surface: var(--white);
  --color-surface-soft: rgba(255, 255, 255, 0.58);
  --color-surface-info: rgba(95, 122, 85, 0.10);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --color-positive: #416c4a;
  --color-caution: #8a692f;
  --color-risk: #8f4f36;
  --color-learning: var(--field-dark);

  --shadow-card: 0 18px 48px rgba(23, 32, 26, 0.07);
  --shadow-popover: 0 20px 54px rgba(23, 32, 26, 0.16);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 30px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --container: 980px;
  --reading: 760px;
  --motion-fast: 180ms;
  --motion-standard: 280ms;
  --motion-slow: 380ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Page-local only: opt in via body.decision-center-page so shared shell chrome stays on live site styles. */
body.decision-center-page {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background:
    radial-gradient(circle at 14% 12%, rgba(216, 200, 170, 0.24), transparent 30%),
    radial-gradient(circle at 88% 34%, rgba(95, 122, 85, 0.10), transparent 30%),
    var(--light);
  line-height: 1.65;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

/* Narrow reading column for the guide only — do not reshape footer/header .container. */
#app-main .container {
  width: min(calc(100% - 2.75rem), var(--container));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-180%);
  background: var(--white);
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popover);
  transition: transform var(--motion-fast) ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(95, 122, 85, .38); outline-offset: 3px; }

@media (max-width: 640px) {
  #app-main .container { width: min(calc(100% - 2rem), var(--container)); }
}

@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;
  }
}