/* ============================================================
   theme-mono.css — Monochrome Glitch
   Cold. Precise. Corrupted signal. Syne + Syne Mono.
   Loaded AFTER main.css so these variables win.
   ============================================================ */

:root {
    /* Fonts */
    --font-display: 'Syne', sans-serif;
    --font-body: 'Syne Mono', monospace;

    /* Palette */
    --bg: #0a0a0a;
    --bg-card: #111111;
    --text: #e8e8e8;
    --text-muted: #888888;
    --text-dim: #444444;

    /* Accents — white is the only accent; red/cyan only as glitch artifacts */
    --accent-1: #e8e8e8;
    --accent-2: #aaaaaa;
    --accent-3: #cccccc;

    /* Glitch channels */
    --glitch-red: #ff2020;
    --glitch-cyan: #00ffff;

    /* Borders */
    --border: rgba(232, 232, 232, 0.07);
    --border-hi: rgba(232, 232, 232, 0.2);

    /* No glows */
    --glow-1: none;
    --glow-2: none;
    --glow-1-text: none;
    --glow-2-text: none;

    /* Nav */
    --nav-h: 68px;
    --nav-bg: rgba(10, 10, 10, 0.92);
    --nav-blur: 8px;
    --nav-link-color: #444444;
    --nav-link-active: #e8e8e8;
    --nav-link-glow: none;

    /* Logo */
    --logo-color: #e8e8e8;
    --logo-shadow: none;
    --logo-weight: 800;
    --logo-spacing: 0.2em;

    /* Hero */
    --hero-align: left;
    --hero-padding: 2rem 2rem 2rem 3rem;
    --hero-border-left: 1px solid rgba(232, 232, 232, 0.18);
    --hero-label-color: #444444;
    --hero-label-shadow: none;
    --hero-label-gap: 1rem;
    --hero-label-line: inline-block;
    --hero-sub-mx: 0;
    --hero-btn-justify: flex-start;
    --hero-btn-align-mobile: flex-start;

    /* Hero bg effects */
    --canvas-display: none;
    --grid-display: none;
    --bgtext-display: block;
    --bgtext-stroke: rgba(232, 232, 232, 0.035);
    --glitch-bars: block; /* glitch bars are a mono-only effect */

    /* H1 */
    --h1-weight: 800;
    --h1-spacing: -0.03em;
    --h1-animation: none;

    /* Headings */
    --heading-weight: 800;
    --heading-color: #e8e8e8;
    --heading-spacing: -0.02em;
    --heading-shadow: none;

    /* Section labels */
    --section-label-line: inline-block;

    /* Cards */
    --card-gap: 1px;
    --card-grid-bg: rgba(232, 232, 232, 0.07);
    --card-grid-border: 1px solid rgba(232, 232, 232, 0.07);
    --card-border: none;
    --card-accent-h: 0px;
    --card-sweep: block;
    --card-sweep-on: scaleX(1);
    --card-hover-bg: #141414;
    --card-hover-lift: none;
    --card-hashy-shadow: none;
    --card-romulator-shadow: none;
    --card-number-display: block;

    /* Tags — both cards use same muted mono style */
    --tag-hashy-border: rgba(232, 232, 232, 0.15);
    --tag-hashy-color: #888888;
    --tag-rom-border: rgba(232, 232, 232, 0.15);
    --tag-rom-color: #888888;

    /* About */
    --about-cols: 1fr 1.4fr;
    --about-stroke: rgba(232, 232, 232, 0.07);
    --prompt-color: #888888;

    /* Contact */
    --contact-cols: 1fr 1fr;

    /* Redacted card stamp */
    --redacted-stamp-color: rgba(232, 232, 232, 0.45);
}

/* Mono: card icons are white for both, names differ */
.card-hashy .card-icon {
    color: #e8e8e8;
    text-shadow: none;
}

.card-romulator .card-icon {
    color: #aaaaaa;
    text-shadow: none;
}

.card-hashy .card-name {
    color: #e8e8e8;
}

.card-romulator .card-name {
    color: #aaaaaa;
}

/* Mono hover: tags go white */
.card-hashy:hover .tag,
.card-romulator:hover .tag {
    border-color: rgba(232, 232, 232, 0.4);
    color: #e8e8e8;
}

/* Mono hover: feature line goes white */
.card-hashy:hover .card-feature,
.card-romulator:hover .card-feature {
    border-left-color: #e8e8e8;
}

/* Mono: about line hover uses white */
.about-line:hover {
    border-left-color: #e8e8e8;
}

/* Mono: contact hover = white for both link types */
.contact-link.cl-blue:hover,
.contact-link.cl-magenta:hover {
    color: #e8e8e8;
    text-shadow: none;
}

/* Grain overlay — heavier for mono */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.034;
    pointer-events: none;
    z-index: 9997;
    animation: grain 0.5s steps(1) infinite;
}