/* assets/css/style.css — PROTOCOL_73 landing
 * Light / minimal theme. Reference: protocol.seventythree.io
 * Base = paper (near-white). Green + black are ACCENTS, never the base.
 * Disclosure rule (canon §14): no crypto primitives in public copy/UI.
 */

:root {
    --paper:        #ffffff;
    --paper-alt:    #f6f7f3;   /* subtle off-white for alternating sections */
    --ink:          #0d0d0d;   /* near-black text */
    --muted:        #5d635c;   /* secondary text */
    --accent:       #1ea34b;   /* deep green — the only green on light */
    --accent-ink:   #15803d;   /* darker green for button hover */
    --accent-soft:  #e9f8ee;   /* faint green wash */
    --line:         rgba(13, 13, 13, 0.10);
    --line-strong:  rgba(13, 13, 13, 0.22);
    --warn:         #b45309;   /* amber for risk/disclaimer (legible on light) */
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Copy emphasis (theme-agnostic — use inside i18n strings) ---------- */
.hl      { color: var(--accent); font-weight: 700; }
.hl-ink  { color: var(--ink);    font-weight: 700; }
.muted   { color: var(--muted); }

/* ---------- Eyebrow / code labels ---------- */
.eyebrow {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* ---------- Backgrounds ---------- */
.grid-bg {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
}
.section-alt { background-color: var(--paper-alt); }

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    transition: background-color .2s ease, transform .2s ease;
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn-ghost {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Version / status pills ---------- */
.pill-version {
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.pill-live {
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.pill-pending {
    border: 1px solid rgba(180, 83, 9, 0.4);
    color: var(--warn);
    background: rgba(180, 83, 9, 0.06);
}

/* ---------- Cards ---------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 24px rgba(13, 13, 13, 0.06);
    transform: translateY(-2px);
}

/* ---------- Whitepaper-style callout (light) ---------- */
.wp-callout {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    color: var(--ink);
}

/* ---------- Risk band ---------- */
.risk-band {
    background: rgba(180, 83, 9, 0.05);
    border: 1px solid rgba(180, 83, 9, 0.3);
    color: var(--warn);
}

/* ---------- Cursor blink ---------- */
.blink { animation: blink 1.1s step-end infinite; color: var(--accent); }
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }
.typing-cursor::after {
    content: '_';
    margin-left: 2px;
    animation: blink 1.1s step-end infinite;
    color: var(--accent);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb { background: rgba(13,13,13,0.2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Selection ---------- */
::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Whitepaper modal ---------- */
body.wp-open { overflow: hidden; }

#wp-modal { background: rgba(13, 13, 13, 0.45); }
#wp-modal .wp-panel { background: var(--paper); border: 1px solid var(--line-strong); }

.wp-nav-item {
    border-left: 2px solid transparent;
    color: var(--muted);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.wp-nav-item:hover { color: var(--ink); background: var(--paper-alt); }
.wp-nav-item.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

.wp-content { position: relative; }
.wp-content h3 { color: var(--ink); }
.wp-content h4 { color: var(--accent); }
.wp-content p  { color: var(--muted); line-height: 1.7; }
.wp-content ul { color: var(--muted); }
.wp-content section { scroll-margin-top: 16px; }

.wp-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 14px 0; }
.wp-table th, .wp-table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.wp-table th { background: var(--paper-alt); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; color: var(--muted); }
.wp-table td { color: var(--ink); }

/* ---------- Mobile: let wide tables scroll instead of overflowing ---------- */
@media (max-width: 640px) {
    .wp-table { display: block; overflow-x: auto; white-space: nowrap; }
    .wp-content { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .blink, .typing-cursor::after { animation: none; }
    html { scroll-behavior: auto; }
}