/* OncoNews Blueprint (B2) — Design Tokens
 * Drop into your global stylesheet, or transform into a theme object
 * for your styled-components / tailwind / vanilla-extract setup.
 */

:root {
  /* ============ Paper / surfaces ============ */
  --bp-paper-top: #04162a;          /* page background, top */
  --bp-paper-bottom: #061d36;       /* page background, bottom */
  --bp-paper-panel: #061f33;        /* article overlay surface */
  --bp-paper-card: rgba(4, 18, 32, 0.55);       /* revision card bg */
  --bp-paper-translucent: rgba(4, 18, 32, 0.6); /* title block + footer */

  --bp-bg: linear-gradient(180deg, var(--bp-paper-top) 0%, var(--bp-paper-bottom) 100%);

  /* ============ Ink / text ============ */
  --bp-ink: #cfe9ff;                /* chalk white — primary text + drawing */
  --bp-ink-soft: #9ec5db;           /* body excerpt */

  /* ============ Accent ============ */
  --bp-accent: #7be6ff;             /* cyan accent */

  /* ============ Dim / tertiary ============ */
  --bp-dim: #3a6a86;                /* labels, metadata */

  /* ============ Border tints (chalk on paper) ============ */
  --bp-border: #22526e;
  --bp-ink-40: rgba(207, 233, 255, 0.4);    /* outer frame */
  --bp-ink-33: rgba(207, 233, 255, 0.33);   /* drawing panel border */
  --bp-ink-20: rgba(207, 233, 255, 0.2);    /* inner double-frame */
  --bp-ink-13: rgba(207, 233, 255, 0.13);   /* footer dividers */

  /* ============ Grid ============ */
  --bp-grid-minor: rgba(207, 233, 255, 0.067);   /* 24px minor */
  --bp-grid-major: rgba(207, 233, 255, 0.121);   /* 120px major */

  /* ============ Accent tints ============ */
  --bp-accent-05: rgba(123, 230, 255, 0.05);    /* rail bg */
  --bp-accent-20: rgba(123, 230, 255, 0.2);     /* hover shadow */
  --bp-accent-40: rgba(123, 230, 255, 0.4);
  --bp-accent-glow: 0 0 18px rgba(123, 230, 255, 0.5);

  /* ============ Overlay ============ */
  --bp-overlay-bg: rgba(2, 8, 18, 0.88);

  /* ============ Typography ============ */
  --bp-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --bp-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;

  --bp-fs-9: 9px;
  --bp-fs-10: 10px;
  --bp-fs-11: 11px;
  --bp-fs-12: 12px;
  --bp-fs-14: 14px;
  --bp-fs-15: 15px;
  --bp-fs-16: 16px;
  --bp-fs-32: 32px;

  --bp-ls-tight: -0.01em;
  --bp-ls-mono-15: 0.15em;
  --bp-ls-mono-20: 0.2em;
  --bp-ls-mono-25: 0.25em;
  --bp-ls-mono-30: 0.3em;

  /* ============ Spacing scale (24px grid) ============ */
  --bp-s-2: 2px;
  --bp-s-4: 4px;
  --bp-s-6: 6px;
  --bp-s-8: 8px;
  --bp-s-10: 10px;
  --bp-s-12: 12px;
  --bp-s-14: 14px;
  --bp-s-16: 16px;
  --bp-s-18: 18px;
  --bp-s-22: 22px;
  --bp-s-24: 24px;
  --bp-s-28: 28px;
  --bp-s-32: 32px;

  /* ============ Motion ============ */
  --bp-rotate-rate: 0.18; /* rad/s, used by three.js */
  --bp-overlay-fade: 200ms ease-out;
  --bp-card-hover: 150ms ease;
}

/* ============ Background grid utility ============ */
.bp-grid-bg {
  background-image:
    repeating-linear-gradient(0deg, var(--bp-grid-minor) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--bp-grid-minor) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, var(--bp-grid-major) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, var(--bp-grid-major) 0 1px, transparent 1px 120px);
}

/* ============ Animations ============ */
@keyframes bp-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
.bp-blink { animation: bp-blink 1.1s steps(1) infinite; }

@keyframes bp-fade-in {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}