/* Research kit base tokens.
 * Scoped under .research-article. Article-specific styles.css still owns the
 * full cascade for the swarm post; this file is the shared kit surface that
 * future research posts import. Wave 2 lanes polish widget CSS in sibling files.
 */
/* ---------- Tokens ---------- */
.research-article {
  box-sizing: border-box;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* Brand type: At Aero (display), Inter (body), Aeonik Fono (mono/labels) */
  --font-display: var(--font-secondary-family), 'At Aero', system-ui, sans-serif;
  --font-body: var(--font-primary-family), 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-mono-family), 'Aeonik Fono', ui-monospace, 'SF Mono', monospace;

  --radius: 4px;
  --radius-lg: 8px;
  --measure: 68ch;
  --page: 1200px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark is the default for this piece (follows the reader's system theme) */
.research-article {
  --color-bg: #0c111d;             /* neutral 900 */
  --color-bg-deep: #080b12;
  --color-surface: #182230;        /* neutral 700 */
  --color-surface-2: #1c2836;
  --color-surface-3: #22303f;
  --color-border: rgba(152, 162, 179, 0.2);
  --color-border-soft: rgba(152, 162, 179, 0.12);

  --color-text: #f2f4f7;           /* neutral 100 */
  --color-text-muted: #98a2b3;     /* neutral 300 */
  --color-text-faint: #667085;

  --color-accent: #2d6ae7;         /* Chaos Blue (editorial accent */
  --color-accent-soft: #5b8aee;
  --color-accent-dim: rgba(45, 106, 231, 0.16);
  --color-accent-line: rgba(45, 106, 231, 0.42);

  /* Incident data colors) figures only (semantic color law) */
  --color-attacker: #e8763a;       /* ember (the attacking swarm */
  --color-attacker-soft: #f0a173;
  --color-attacker-dim: rgba(232, 118, 58, 0.16);
  --color-attacker-line: rgba(232, 118, 58, 0.42);
  --color-agent: #4bb3a8;          /* teal) agent coordination */
  --color-agent-dim: rgba(75, 179, 168, 0.14);
  --color-danger: #d8564f;         /* red (compromise events */
  --color-danger-dim: rgba(216, 86, 79, 0.14);
  --color-gold: #cfa74a;           /* gold) defender signals missed */
  --color-gold-dim: rgba(207, 167, 74, 0.14);
  --color-ext: #7f8cd6;            /* periwinkle (third-party infra */
  --color-ext-dim: rgba(127, 140, 214, 0.14);

  /* Hero swarm canvas (hex only) the canvas can't parse rgba()) */
  --swarm-hub: #e8763a;
  --swarm-node: #4bb3a8;
  --swarm-faint: #667085;

  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -24px rgba(0,0,0,0.8);
  --grid-line: rgba(255, 255, 255, 0.035);
}

/* Light theme follows the reader's system preference (no in-page toggle) */
@media (prefers-color-scheme: light) {
  .research-article {
    --color-bg: #ffffff;           /* neutral 0 */
    --color-bg-deep: #f2f4f7;      /* neutral 100 */
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-surface-3: #f2f4f7;
    --color-border: rgba(152, 162, 179, 0.28);
    --color-border-soft: rgba(152, 162, 179, 0.16);

    --color-text: #182230;         /* neutral 700 */
    --color-text-muted: #475467;   /* neutral 500 */
    --color-text-faint: #98a2b3;   /* neutral 300 */

    --color-accent: #2d6ae7;       /* Chaos Blue holds on white */
    --color-accent-soft: #2159c9;
    --color-accent-dim: rgba(45, 106, 231, 0.1);
    --color-accent-line: rgba(45, 106, 231, 0.34);

    --color-attacker: #b4471a;
    --color-attacker-soft: #c85d2e;
    --color-attacker-dim: rgba(180, 71, 26, 0.1);
    --color-attacker-line: rgba(180, 71, 26, 0.34);
    --color-agent: #10736c;
    --color-agent-dim: rgba(16, 115, 108, 0.1);
    --color-danger: #a8322c;
    --color-danger-dim: rgba(168, 50, 44, 0.09);
    --color-gold: #8a6d18;
    --color-gold-dim: rgba(138, 109, 24, 0.1);
    --color-ext: #464f9e;
    --color-ext-dim: rgba(70, 79, 158, 0.1);

    --swarm-hub: #b4471a;
    --swarm-node: #10736c;
    --swarm-faint: #98a2b3;

    --shadow: 0 1px 2px rgba(20,18,15,0.04), 0 14px 34px -22px rgba(20,18,15,0.24);
    --grid-line: rgba(0, 0, 0, 0.04);
  }
}