/* ==========================================================================
   Golden Bullet - base.css
   Design tokens, reset, typography, accessibility primitives and utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette - discreet, warm, high contrast */
  --gb-black: #0B0A08;
  --gb-ink: #16130D;
  --gb-ink-soft: #2A251C;
  --gb-gold: #C9A24B;
  --gb-gold-strong: #A8801F;
  --gb-gold-soft: #E7D6A8;
  --gb-cream: #F7F2E8;
  --gb-sand: #EFE7D7;
  --gb-sand-deep: #E2D5BC;
  --gb-white: #FFFFFF;
  --gb-muted: #655E50;
  --gb-muted-on-dark: #C4BBAA;
  --gb-line: #DDD1B9;
  --gb-line-dark: #33302A;
  --gb-danger: #9E1F26;
  --gb-danger-soft: #FBEDED;
  --gb-success: #276148;
  --gb-success-soft: #EAF4EE;
  --gb-warning: #7A5510;
  --gb-warning-soft: #FCF3DF;
  --gb-info-soft: #EDF1F6;

  /* Typography */
  --gb-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --gb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gb-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --gb-text-2xs: 0.6875rem;
  --gb-text-xs: 0.75rem;
  --gb-text-sm: 0.875rem;
  --gb-text-base: 1rem;
  --gb-text-md: 1.0625rem;
  --gb-text-lg: 1.1875rem;
  --gb-text-xl: 1.375rem;
  --gb-text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --gb-text-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --gb-text-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  /* Spacing scale */
  --gb-space-1: 0.25rem;
  --gb-space-2: 0.5rem;
  --gb-space-3: 0.75rem;
  --gb-space-4: 1rem;
  --gb-space-5: 1.5rem;
  --gb-space-6: 2rem;
  --gb-space-7: 2.5rem;
  --gb-space-8: 3rem;
  --gb-space-9: 4rem;
  --gb-space-10: 5rem;

  /* Shape + depth */
  --gb-radius-sm: 4px;
  --gb-radius: 8px;
  --gb-radius-lg: 14px;
  --gb-radius-pill: 999px;
  --gb-shadow-sm: 0 1px 2px rgba(11, 10, 8, 0.08), 0 1px 3px rgba(11, 10, 8, 0.06);
  --gb-shadow: 0 6px 18px rgba(11, 10, 8, 0.10);
  --gb-shadow-lg: 0 18px 48px rgba(11, 10, 8, 0.18);

  /* Layout */
  --gb-container: 1240px;
  --gb-container-narrow: 820px;
  --gb-header-h: 72px;
  --gb-announce-h: 44px;

  /* Motion */
  --gb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gb-dur-fast: 140ms;
  --gb-dur: 240ms;
  --gb-dur-slow: 480ms;

  /* Z-index scale */
  --gb-z-header: 100;
  --gb-z-drawer: 200;
  --gb-z-overlay: 300;
  --gb-z-modal: 400;
  --gb-z-toast: 500;

  /* Themeable surface tokens (dark sections override these) */
  --gb-surface: var(--gb-white);
  --gb-surface-alt: var(--gb-cream);
  --gb-on-surface: var(--gb-ink);
  --gb-border: var(--gb-line);

  color-scheme: light;
}

/* Dark section theming: <section class="gb-theme-dark"> */
.gb-theme-dark {
  --gb-surface: var(--gb-ink);
  --gb-surface-alt: var(--gb-charcoal, #221E17);
  --gb-on-surface: var(--gb-cream);
  --gb-muted: var(--gb-muted-on-dark);
  --gb-border: var(--gb-line-dark);
  --gb-line: var(--gb-line-dark);
  color: var(--gb-on-surface);
  background-color: var(--gb-surface);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--gb-cream);
  color: var(--gb-ink);
  font-family: var(--gb-font-body);
  font-size: var(--gb-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

body.gb-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gb-font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--gb-space-4);
  color: inherit;
  text-wrap: balance;
}

h1 { font-size: var(--gb-text-4xl); }
h2 { font-size: var(--gb-text-3xl); }
h3 { font-size: var(--gb-text-2xl); }
h4 { font-size: var(--gb-text-xl); }

p { margin: 0 0 var(--gb-space-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--gb-space-4); padding-left: 1.25rem; }
li + li { margin-top: var(--gb-space-1); }

img, svg, video { max-width: 100%; height: auto; display: block; }

img { background-color: var(--gb-sand); }

a {
  color: var(--gb-gold-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--gb-ink); }
.gb-theme-dark a { color: var(--gb-gold); }
.gb-theme-dark a:hover { color: var(--gb-gold-soft); }

hr {
  border: 0;
  border-top: 1px solid var(--gb-border);
  margin: var(--gb-space-6) 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

table { border-collapse: collapse; width: 100%; }

/* --------------------------------------------------------------------------
   3. Focus + accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--gb-gold-strong);
  outline-offset: 2px;
  border-radius: var(--gb-radius-sm);
}
.gb-theme-dark :focus-visible { outline-color: var(--gb-gold-soft); }

.gb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gb-skip-link {
  position: absolute;
  left: var(--gb-space-4);
  top: -100px;
  z-index: calc(var(--gb-z-toast) + 1);
  background: var(--gb-ink);
  color: var(--gb-cream);
  padding: var(--gb-space-3) var(--gb-space-5);
  border-radius: var(--gb-radius);
  transition: top var(--gb-dur) var(--gb-ease);
}
.gb-skip-link:focus { top: var(--gb-space-3); color: var(--gb-cream); }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.gb-eyebrow {
  display: block;
  font-family: var(--gb-font-body);
  font-size: var(--gb-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gb-gold-strong);
  margin: 0 0 var(--gb-space-3);
}
.gb-theme-dark .gb-eyebrow { color: var(--gb-gold); }

.gb-lead {
  font-size: var(--gb-text-lg);
  color: var(--gb-muted);
  max-width: 62ch;
}
.gb-small { font-size: var(--gb-text-sm); }
.gb-list-plain { list-style: none; padding-left: 0; }
.gb-mono { font-family: var(--gb-font-mono); font-size: var(--gb-text-sm); }

.gb-underline-accent {
  background-image: linear-gradient(var(--gb-gold), var(--gb-gold));
  background-repeat: no-repeat;
  background-size: 100% 0.35em;
  background-position: 0 88%;
}

/* --------------------------------------------------------------------------
   5. Motion + reveal animations
   -------------------------------------------------------------------------- */
.gb-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--gb-dur-slow) var(--gb-ease), transform var(--gb-dur-slow) var(--gb-ease);
  will-change: opacity, transform;
}
.gb-reveal.gb-is-visible { opacity: 1; transform: none; }
.gb-reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.gb-reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.gb-reveal[data-reveal-delay="3"] { transition-delay: 240ms; }
.gb-reveal[data-reveal-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .gb-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */
.gb-text-center { text-align: center; }
.gb-text-right { text-align: right; }
.gb-nowrap { white-space: nowrap; }
.gb-full-bleed { width: 100%; }
.gb-mt-0 { margin-top: 0; }
.gb-mb-0 { margin-bottom: 0; }
.gb-mt-4 { margin-top: var(--gb-space-4); }
.gb-mt-6 { margin-top: var(--gb-space-6); }
.gb-mb-4 { margin-bottom: var(--gb-space-4); }
.gb-mb-6 { margin-bottom: var(--gb-space-6); }
.gb-my-6 { margin-block: var(--gb-space-6); }

.gb-stack > * + * { margin-top: var(--gb-space-4); }
.gb-stack-sm > * + * { margin-top: var(--gb-space-2); }
.gb-stack-lg > * + * { margin-top: var(--gb-space-6); }

.gb-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gb-space-3);
  align-items: center;
}
.gb-muted { color: var(--gb-muted); }
.gb-danger-text { color: var(--gb-danger); }
.gb-success-text { color: var(--gb-success); }