/* ================================================================
   Shieldbio Brand Design Tokens
   Extracted from UI-guide.html — single source of truth
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* ── Brand Colors ─────────────────────────────────────────── */
    --c-primary: #000099;
    --c-purple: #8F00B8;
    --c-magenta: #E1007A;
    --c-cyan: #00C2FF;
    --c-green: #00C296;
    --c-gold: #FFB800;

    /* ── Gray Scale (9 steps, blue-tinted) ────────────────────── */
    --g-900: #0a0a0f;
    --g-800: #1a1a22;
    --g-700: #333340;
    --g-600: #555562;
    --g-500: #777785;
    --g-400: #9999a3;
    --g-300: #bbbbc2;
    --g-200: #dddde2;
    --g-100: #f4f4f7;
    --g-050: #fafafc;

    /* ── Semantic Colors (mapped from accents) ────────────────── */
    --sem-success: #00C296;
    --sem-warning: #FFB800;
    --sem-error: #E1007A;
    --sem-info: #00C2FF;

    /* ── Spacing Tokens (8pt grid) ────────────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-6: 24px;
    --s-8: 32px;
    --s-12: 48px;
    --s-16: 64px;

    /* ── Border Radius ────────────────────────────────────────── */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;

    /* ── Typography ───────────────────────────────────────────── */
    --font-display: 'Poppins', 'Noto Sans SC', sans-serif;
    --font-body: 'Noto Sans SC', 'Poppins', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ── Global Base ──────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background-color: var(--g-100);
    -webkit-font-smoothing: antialiased;
}

/* ── Card ─────────────────────────────────────────────────────── */
.card {
    border-radius: var(--r-md);
}

/* ── Mono helpers ─────────────────────────────────────────────── */
.font-mono,
code,
kbd,
samp {
    font-family: var(--font-mono);
}