/*
 * Deliberize brand theme — v1.0
 *
 * Single source of truth for colors, fonts, and base tokens.
 * Change a value here, and it propagates to every page that links
 * this file.
 *
 * To swap JetBrains Mono (for example) for another mono face:
 *   1. Update the &family= param below to your new face
 *   2. Change `--font-mono` to point at it
 *
 * Imported by every branded page via:
 *   <link rel="stylesheet" href="/brand/theme.css">
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif&display=swap');

:root {
    /* ── Color tokens ──────────────────────────────────────────── */
    --oxblood: #5C1A1B;
    --oxblood-deep: #1A0808;
    --ink: #141414;
    --ink-65: rgba(20, 20, 20, 0.65);
    --ink-55: rgba(20, 20, 20, 0.55);
    --ink-40: rgba(20, 20, 20, 0.40);
    --ink-18: rgba(20, 20, 20, 0.18);
    --ink-15: rgba(20, 20, 20, 0.15);
    --ink-12: rgba(20, 20, 20, 0.12);
    --ink-06: rgba(20, 20, 20, 0.06);
    --paper: #FAF6EE;
    --bone: #F4EFE6;
    --steel: #2B4255;
    --steel-deep: #0F1C27;

    /* Paper-on-dark tints for use on oxblood-deep / steel-deep surfaces */
    --paper-85: rgba(250, 246, 238, 0.85);
    --paper-75: rgba(250, 246, 238, 0.75);
    --paper-65: rgba(250, 246, 238, 0.65);
    --paper-55: rgba(250, 246, 238, 0.55);
    --paper-40: rgba(250, 246, 238, 0.40);
    --paper-20: rgba(250, 246, 238, 0.20);
    --paper-12: rgba(250, 246, 238, 0.12);
    --paper-08: rgba(250, 246, 238, 0.08);

    /* Branded oxblood / steel tints */
    --oxblood-tint-08: rgba(92, 26, 27, 0.08);
    --oxblood-tint-12: rgba(92, 26, 27, 0.12);
    --oxblood-tint-20: rgba(92, 26, 27, 0.20);
    --oxblood-tint-25: rgba(92, 26, 27, 0.25);
    --steel-tint-08: rgba(43, 66, 85, 0.08);
    --steel-tint-20: rgba(43, 66, 85, 0.20);
    --steel-tint-25: rgba(43, 66, 85, 0.25);
    --steel-tint-35: rgba(43, 66, 85, 0.35);

    /* Semantic aliases — point these at the raw tokens above */
    --color-bg: var(--bone);
    --color-surface: var(--paper);
    --color-text: var(--ink);
    --color-text-muted: var(--ink-65);
    --color-text-faint: var(--ink-55);
    --color-border: var(--ink-12);
    --color-primary: var(--oxblood);
    --color-primary-hover: var(--oxblood-deep);
    --color-accent: var(--steel);

    /* ── Font tokens ──────────────────────────────────────────── */
    /* Swap the face in @import above + here to change globally. */
    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-wordmark: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* ── Type scale (optional — pages may override) ──────────── */
    --tracking-wordmark: -0.032em;
    --tracking-display: -0.02em;
    --tracking-kicker: 0.22em;
    --tracking-caption: 0.24em;

    /* ── Focus ring ──────────────────────────────────────────── */
    --focus-ring-color: var(--oxblood);
    --focus-ring-offset: 2px;
    --focus-ring-width: 2px;
}

/* Keep emoji glyph synthesis off for sharper icon rendering. */
*, *::before, *::after { font-synthesis: none; }

/* Selection */
::selection { background: rgba(92, 26, 27, 0.25); color: var(--ink); }

/* Default focus-visible treatment */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* ── Button text-color safety net ────────────────────────────
 * Buttons live in many container contexts (nav-links, footers,
 * sidebars) that set `color:` on descendant <a> elements. That
 * inherited rule has specificity (0,1,1) and used to beat the
 * single-class .btn-primary selector, leaving us with dark ink
 * text on an oxblood button (unreadable). Compound selectors
 * here bump specificity to (0,2,0) so the button's own color
 * wins regardless of container.
 */
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
.btn-primary.btn,
a.btn-primary:not([class*="btn-outline"]),
button.btn-primary { color: var(--paper); }

.btn.btn-outline,
a.btn.btn-outline,
button.btn.btn-outline,
.btn-outline.btn,
a.btn-outline:not([class*="btn-primary"]),
button.btn-outline { color: var(--ink); }

.btn.btn-primary:hover,
a.btn.btn-primary:hover { color: var(--paper); }

/* ── Utility classes ─────────────────────────────────────────── */

.brand-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-text-faint);
    font-weight: 500;
}

.brand-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--steel);
    font-weight: 500;
}

.brand-wordmark {
    font-family: var(--font-wordmark);
    font-weight: 600;
    letter-spacing: var(--tracking-wordmark);
    color: var(--ink);
}