/**
 * SamaBrains design tokens — shared across editorial, chrome, reader, and story UI.
 * Loaded sitewide via site-light-theme.js (build injects into every page).
 */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand — monochrome black & white */
  --sb-navy: #0a0a0a;
  --sb-teal: #111111;
  --sb-teal-hover: #333333;
  --sb-teal-soft: rgba(0, 0, 0, 0.06);
  --sb-ink: #0a0a0a;
  --sb-muted: #555555;
  --sb-line: #e0e0e0;
  --sb-surface: #f9f9f9;
  --sb-bg: #ffffff;
  --sb-danger: #1a1a1a;
  --sb-ok: #1a1a1a;

  /* Typography */
  --sb-font-ui: Inter, system-ui, sans-serif;
  --sb-font-display: 'Source Serif 4', Georgia, serif;

  /* Type scale */
  --sb-text-xs: 0.75rem;
  --sb-text-sm: 0.875rem;
  --sb-text-base: 1rem;
  --sb-text-lg: 1.125rem;

  /* Spacing */
  --sb-space-1: 0.25rem;
  --sb-space-2: 0.5rem;
  --sb-space-3: 0.75rem;
  --sb-space-4: 1rem;
  --sb-space-6: 1.5rem;
  --sb-space-8: 2rem;
  --sb-space-12: 3rem;

  /* Radius */
  --sb-radius-sm: 6px;
  --sb-radius-md: 10px;
  --sb-radius-lg: 14px;
  --sb-radius-pill: 999px;

  /* Elevation */
  --sb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --sb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.09);
  --sb-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.14);

  /* Motion */
  --sb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sb-duration-fast: 150ms;
  --sb-duration: 220ms;
  --sb-duration-slow: 420ms;

  /* Layout */
  --sb-max-w: 1080px;
  /* Matches the fixed .site-nav height; the topics strip appears at 768px. */
  --sb-nav-h: 48px;
}

@media (min-width: 768px) {
  :root { --sb-nav-h: 106px; }
}

/* Keeps anchor targets from landing under the fixed nav. */
html {
  scroll-padding-top: calc(var(--sb-nav-h) + 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-duration-fast: 0ms;
    --sb-duration: 0ms;
    --sb-duration-slow: 0ms;
  }
}

/* Subtle page atmosphere */
body.ed-page,
body.reader-body {
  background-color: var(--sb-bg);
  background-image:
    radial-gradient(1200px 600px at 100% -20%, rgba(0, 0, 0, 0.04), transparent 55%),
    radial-gradient(900px 500px at -10% 100%, rgba(0, 0, 0, 0.03), transparent 50%);
}

/* Staggered reveal for main content blocks */
@keyframes sb-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sb-animate-in {
  animation: sb-rise var(--sb-duration-slow) var(--sb-ease) both;
}

.sb-animate-in-delay-1 { animation-delay: 60ms; }
.sb-animate-in-delay-2 { animation-delay: 120ms; }
.sb-animate-in-delay-3 { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .sb-animate-in,
  .sb-animate-in-delay-1,
  .sb-animate-in-delay-2,
  .sb-animate-in-delay-3 {
    animation: none;
  }
}