:root {
    --font: "Fira Code", monospace;

    /* ── Core backgrounds ──────────────────────────────────────── */
    --bg: #111418;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-inner: rgba(255, 255, 255, 0.02);

    /* ── Base text ─────────────────────────────────────────────── */
    --text: #c9d1d9;
    --muted: #6e7681;
    --white: #f0f2f5;
    --accent: #6ea8e0;

    /* ── Tag palette ───────────────────────────────────────────── */
    --tag-teal: 90, 170, 175;
    --tag-rose: 170, 130, 170;
    --tag-amber: 200, 170, 90;
    --tag-orange: 190, 130, 90;
    --tag-green: 110, 170, 130;
    --tag-red: 190, 90, 85;
    --tag-neutral: 150, 160, 170;

    /* ── Year badge ────────────────────────────────────────────── */
    --year-bg: rgba(110, 168, 224, 0.10);
    --year-color: rgba(110, 168, 224, 0.85);

    /* ── Divider ───────────────────────────────────────────────── */
    --divider-color: rgba(255, 255, 255, 0.08);

    /* ── Toggle button ─────────────────────────────────────────── */
    --toggle-bg: rgba(255, 255, 255, 0.04);
    --toggle-color: #c9d1d9;
    --toggle-bg-hover: rgba(255, 255, 255, 0.09);
    --toggle-border-hover: rgba(110, 168, 224, 0.45);
    --toggle-color-hover: #6ea8e0;
    --toggle-outline: #6ea8e0;

    /* ── Pills ─────────────────────────────────────────────────── */
    --pill-bg: rgba(255, 255, 255, 0.04);
    --pill-bg-hover: rgba(255, 255, 255, 0.09);
    --pill-color: #c9d1d9;
    --dot-recent-color: #6ea8e0;
    --pill-recent-color: #6ea8e0;
    --pill-old-color: #8b97a3;

    /* ── Side icon glow ────────────────────────────────────────── */
    --side-icon-glow: rgba(110, 168, 224, 0.20);

    /* ── Icon brand colors ─────────────────────────────────────── */
    --icon-linkedin: #6ea8e0;
    --icon-artstation: #6ea8e0;
    --icon-youtube: #c9756c;
    --icon-itch: #c9756c;
    --icon-github: #c9d1d9;
    --icon-envelope: #a892b8;
    --icon-file: #7fb59a;

    /* ── Misc ──────────────────────────────────────────────────── */
    --project-desc-color: #8b97a3;
    --filter-label-color: #6e7681;
    --footer-color: #8b97a3;
    --view-count-color: #c9d1d9;

    /* ── Background wireframe shapes ───────────────────────────── */
    --shape-stroke: rgba(255, 255, 255, 0.04);
    --shape-stroke-bright: rgba(255, 255, 255, 0.09);
    --shape-fill: rgba(255, 255, 255, 0.015);
    --shape-glow: rgba(110, 168, 224, 0.08);
}