/* LogicStack — design tokens + the few component classes Tailwind utilities
   don't express well. Everything else is Tailwind utilities in the markup.
   Tokens mirror the "LogicStack Professional" design system (navy + gold). */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #FBF9F4;
  --color-surface: #FFFFFF;
  --color-text: #1B1C19;
  --color-accent: #0D1B3E;
  --color-accent-100: #F0EEE9;
  --color-accent-600: #45464E;
  --color-accent-700: #0A1530;
  --color-accent-2: #FEAE2C;
  --color-accent-2-100: #FDF1DD;
  --color-accent-2-800: #5A3B0A;
  --color-divider: color-mix(in srgb, #0D1B3E 12%, transparent);

  --font-heading: "Manrope", sans-serif;
  --font-body: "Hanken Grotesk", sans-serif;
  --font-heading-weight: 700;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;

  --radius-md: 6px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

/* Themed focus ring — never the browser default. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--color-accent-2) 35%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.85) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-primary { background: var(--color-accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--color-accent-700); color: #FFFFFF; }
.btn-primary:active { background: var(--color-accent-700); }

.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — scroll reveal — */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.16,.8,.24,1), transform 700ms cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}