/*
 * MXD Network — shared theme
 *
 * Drop-in :root variable definitions for the "professional red"
 * post-quantum palette + tx-type accents + responsive utilities.
 *
 * Page integration:
 *   <link rel="stylesheet" href="/css/mxd-theme.css">
 * place BEFORE any page-level <style> block, and DELETE the local
 * :root { --primary: ...; ... } block in that page so this one wins.
 */

:root {
    /* ===== Primary palette — Professional Red ===== */
    /* Crimson (Mexican flag red) — main brand accent */
    --primary:       #C1272D;
    /* Deep blood red — headers, borders, depth */
    --primary-dark:  #8B1A1F;
    /* Bright accent — hover, glow, calls-to-action */
    --primary-light: #E94B4B;

    /* Legacy gold vars for any inline reference still tied to old palette.
     * Setting these to red ensures any leftover var(--gold) usage just inherits. */
    --gold:          var(--primary);
    --gold-light:    var(--primary-light);

    /* Secondary — neutral silver for ancillary highlights */
    --secondary:     #C0C0C0;

    /* ===== Status colors ===== */
    --success: #10b981;
    --warning: #f59e0b;
    --danger:  #ef4444;
    --info:    #3b82f6;

    /* ===== Backgrounds — almost-black with subtle red tint ===== */
    --bg-dark:        #0a0606;
    --bg-card:        #1a0e10;
    --bg-card-hover:  #261518;
    --bg-elevated:    #2a1a1c;

    /* ===== Text ===== */
    --text-primary:    #ffffff;
    --text-secondary:  #f5e1e3;     /* subtle pink-tinted off-white */
    --text-muted:      #a0888a;

    /* ===== Borders ===== */
    --border:        #3a2628;
    --border-light:  #4a3033;

    /* ===== Gradients ===== */
    --gradient-primary:   linear-gradient(135deg, #C1272D 0%, #E94B4B 100%);
    --gradient-pq:        linear-gradient(135deg, #8B1A1F 0%, #C1272D 100%);
    --gradient-secondary: linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 100%);
    --gradient-bg:        radial-gradient(ellipse at top, #1a0e10 0%, #0a0606 70%);

    /* ===== Shadows ===== */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow:  0 0 30px rgba(193, 39, 45, 0.25);
    --shadow-glow-strong: 0 0 50px rgba(193, 39, 45, 0.4);

    /* ===== Tx-type accent colors (block explorer badges) ===== */
    /* Each maps to a tx_type_id from mxd_transaction.h */
    --tx-regular:        #6b7280;    /* grey */
    --tx-coinbase:       var(--primary);
    --tx-contract:       #3b82f6;    /* blue */
    --tx-bridge:         #ed8936;    /* orange */
    --tx-admin:          #9333ea;    /* purple */

    /* ===== Cryptographic algorithm tags ===== */
    --algo-pq:        var(--primary-dark);     /* Dilithium5 = main red */
    --algo-classical: #6b7280;                  /* Ed25519 = grey (deprecated-leaning) */

    /* ===== Spacing scale (consistent across pages) ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* ===== Border radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

/* ===== Tx-type badge component ===== */
.tx-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-md);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.03);
}
.tx-type-badge .tx-type-icon {
    font-size: 0.85rem;
    line-height: 1;
}
.tx-type-regular  { color: var(--tx-regular); }
.tx-type-coinbase { color: var(--tx-coinbase); }
.tx-type-contract { color: var(--tx-contract); }
.tx-type-bridge   { color: var(--tx-bridge); }
.tx-type-admin    { color: var(--tx-admin); }

/* ===== Algorithm tag (Dilithium5 / Ed25519 indicator) ===== */
.algo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.algo-tag.algo-pq {
    background: rgba(139, 26, 31, 0.2);
    color: var(--primary-light);
    border: 1px solid var(--primary-dark);
}
.algo-tag.algo-classical {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ===== PQ badge for hero / cards ===== */
.pq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--gradient-pq);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    box-shadow: var(--shadow-glow);
}
.pq-badge::before {
    content: '⚛';
    font-size: 1rem;
}

/* ===== Responsive scaffolding helpers ===== */
@media (max-width: 768px) {
    :root {
        /* Compact spacing on small screens */
        --space-6: 1rem;
        --space-8: 1.25rem;
        --space-12: 1.75rem;
    }
    .tx-type-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.45rem;
    }
}
@media (max-width: 480px) {
    .tx-type-badge .tx-type-label {
        display: none;
    }
    .tx-type-badge .tx-type-icon {
        font-size: 1rem;
    }
}

/* Selection color */
::selection {
    background: var(--primary-dark);
    color: white;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}