/* ============================================================
   Archon Systems — base.css

   Principles:
   - No-JS required interface
   - Tor-aware defaults
   - GPU-light visual system
   - No external SVG dependency
   - Small semantic motion only
   - Single accent and signal token system
   ============================================================ */

:root {
    /* Type */
    --font-sans:
            "Inter",
            system-ui,
            -apple-system,
            "Segoe UI",
            Roboto,
            "Helvetica Neue",
            Arial,
            sans-serif;

    --font-mono:
            "JetBrains Mono",
            ui-monospace,
            "Cascadia Code",
            "SF Mono",
            Consolas,
            "Liberation Mono",
            monospace;

    /* Ink */
    --ink: #e8ebf5;
    --ink-dim: #a0a8bb;
    --ink-faint: #687083;

    /* Background / surfaces */
    --bg: #04040c;
    --surface: rgba(12, 14, 24, 0.94);
    --surface-2: rgba(16, 19, 31, 0.96);
    --surface-3: rgba(8, 10, 18, 0.98);
    --surface-soft: rgba(255, 255, 255, 0.025);

    /* Borders */
    --edge: rgba(148, 163, 184, 0.16);
    --edge-strong: rgba(148, 163, 184, 0.30);

    /* Brand */
    --accent: #8b92f6;
    --accent-hover: #a2a7fb;
    --accent-soft: rgba(139, 146, 246, 0.14);
    --accent-edge: rgba(139, 146, 246, 0.42);

    /* Signal */
    --signal: #34d399;
    --signal-soft: rgba(52, 211, 153, 0.12);
    --signal-edge: rgba(52, 211, 153, 0.34);

    /* Status */
    --danger: #fb7185;
    --warning: #fbbf24;

    /* Shape */
    --radius: 14px;
    --radius-lg: 20px;
}

/* ============================================================
   Base
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;

    margin: 0;

    font-family: var(--font-sans);

    color: var(--ink);
    background-color: var(--bg);
}

::selection {
    color: #060712;
    background: var(--accent-hover);
}

/* ============================================================
   Background atmosphere
   ============================================================ */

.bgfx::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
            radial-gradient(
                    1100px 760px at 13% -10%,
                    rgba(99, 102, 241, 0.15) 0%,
                    rgba(99, 102, 241, 0.075) 31%,
                    rgba(99, 102, 241, 0) 66%
            ),
            radial-gradient(
                    900px 680px at 92% 0%,
                    rgba(52, 211, 153, 0.09) 0%,
                    rgba(52, 211, 153, 0.035) 34%,
                    rgba(52, 211, 153, 0) 68%
            );
}

.bgfx::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    opacity: 0.72;

    background-image:
            repeating-linear-gradient(
                    0deg,
                    rgba(148, 163, 184, 0.042) 0,
                    rgba(148, 163, 184, 0.042) 1px,
                    rgba(148, 163, 184, 0) 1px,
                    rgba(148, 163, 184, 0) 48px
            ),
            repeating-linear-gradient(
                    90deg,
                    rgba(148, 163, 184, 0.032) 0,
                    rgba(148, 163, 184, 0.032) 1px,
                    rgba(148, 163, 184, 0) 1px,
                    rgba(148, 163, 184, 0) 48px
            );
}

@supports (mask-image: radial-gradient(#000, transparent)) {
    .bgfx::after {
        mask-image:
                radial-gradient(
                        ellipse 115% 82% at 50% 22%,
                        #000 32%,
                        rgba(0, 0, 0, 0) 76%
                );
    }
}

@supports (-webkit-mask-image: radial-gradient(#000, transparent)) {
    .bgfx::after {
        -webkit-mask-image:
                radial-gradient(
                        ellipse 115% 82% at 50% 22%,
                        #000 32%,
                        rgba(0, 0, 0, 0) 76%
                );
    }
}

.noise::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    opacity: 0.045;

    background-image: url("/images/noise.png");
    background-repeat: repeat;
}

/* ============================================================
   Surface system
   ============================================================ */

.panel,
.surface {
    border: 1px solid var(--edge);
    border-radius: var(--radius);

    background: var(--surface);
}

.panel-2,
.surface-strong {
    border: 1px solid var(--edge);
    border-radius: var(--radius);

    background: var(--surface-2);
}

.surface-deep {
    border: 1px solid var(--edge);
    border-radius: var(--radius);

    background: var(--surface-3);
}

.surface-soft {
    border: 1px solid var(--edge);
    border-radius: var(--radius);

    background: var(--surface-soft);
}

.surface-glass {
    border: 1px solid var(--edge);
    border-radius: var(--radius);

    background: rgba(12, 14, 24, 0.94);
}

@supports (
    (backdrop-filter: blur(8px)) or
    (-webkit-backdrop-filter: blur(8px))
) {
    .surface-glass {
        background: rgba(12, 14, 24, 0.82);

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

.surface-lift {
    transition:
            transform 180ms ease,
            border-color 180ms ease,
            background-color 180ms ease;
}

.surface-lift:hover {
    border-color: var(--edge-strong);

    transform: translateY(-2px);
}

.border-glow {
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.border-glow:hover {
    border-color: var(--accent-edge);
}

/* ============================================================
   Type helpers
   ============================================================ */

.kicker {
    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;

    text-transform: uppercase;
}

.section-kicker {
    display: inline-flex;
    align-items: center;

    gap: 0.6rem;

    color: var(--ink-faint);

    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.24em;

    text-transform: uppercase;
}

.section-kicker::before {
    content: "";

    width: 1.4rem;
    height: 1px;

    background: var(--accent-edge);
}

.mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--accent);

    font-family: var(--font-mono);
    line-height: 1;
}

/* ============================================================
   Buttons / chips
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;
    padding: 0.84rem 1.36rem;

    cursor: pointer;
    user-select: none;

    border-radius: 11px;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1;

    text-transform: uppercase;

    transition:
            border-color 180ms ease,
            color 180ms ease,
            background-color 180ms ease,
            transform 180ms ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    border: 1px solid transparent;

    background: var(--accent);
    color: #070817;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-ghost {
    border: 1px solid var(--edge);

    background: var(--surface);
    color: var(--ink-dim);
}

.btn-ghost:hover {
    color: var(--ink);
    border-color: var(--accent-edge);
}

.chip,
.protocol-chip {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    border: 1px solid var(--edge);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.025);
    color: var(--ink-dim);

    font-family: var(--font-mono);
}

.chip {
    padding: 0.3rem 0.7rem;

    font-size: 0.68rem;
}

.protocol-chip {
    padding: 0.45rem 0.72rem;

    font-size: 0.66rem;
    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.protocol-chip strong {
    color: var(--ink-dim);

    font-weight: 500;
}

/* ============================================================
   Terminal / ritual components
   ============================================================ */

.terminal-panel {
    overflow: hidden;

    border: 1px solid var(--edge);
    border-radius: 18px;

    background: rgba(5, 7, 14, 0.96);
}

.terminal-head {
    display: flex;
    align-items: center;

    gap: 0.5rem;
    padding: 0.8rem 1rem;

    border-bottom: 1px solid var(--edge);

    background: rgba(255, 255, 255, 0.025);
}

.terminal-dot {
    width: 0.55rem;
    height: 0.55rem;

    border-radius: 999px;

    background: var(--edge-strong);
}

.terminal-dot.accent {
    background: var(--accent);
}

.terminal-dot.signal {
    background: var(--signal);
}

.mys-divider {
    position: relative;

    height: 1px;

    background:
            linear-gradient(
                    90deg,
                    rgba(139, 146, 246, 0) 0%,
                    var(--accent-edge) 50%,
                    rgba(139, 146, 246, 0) 100%
            );
}

.mys-divider::before {
    content: "⟁";

    position: absolute;
    left: 50%;
    top: 50%;

    padding: 0 12px;

    color: var(--accent-edge);
    background: var(--bg);

    font-size: 0.72rem;

    transform: translate(-50%, -50%);
}

.cyber-corner {
    position: relative;
}

.cyber-corner::before,
.cyber-corner::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    border: 1px solid var(--accent-edge);

    pointer-events: none;
}

.cyber-corner::before {
    top: -1px;
    left: -1px;

    border-right: 0;
    border-bottom: 0;
}

.cyber-corner::after {
    right: -1px;
    bottom: -1px;

    border-left: 0;
    border-top: 0;
}

.cursor-blink::after {
    content: "▊";

    color: var(--signal);

    animation: blink 1.2s step-end infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ============================================================
   General no-JS interaction plumbing

   Navbar state is intentionally not defined here.
   Navbar state belongs to components/navbar.css.
   ============================================================ */

summary::-webkit-details-marker {
    display: none;
}

summary {
    list-style: none;
}

/* Standalone PGP layer */

.pgp-overlay,
.pgp-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
}

.pgp-overlay {
    transform: none;
}

.pgp-panel {
    transform: translateY(0.5rem);
}

#pgp:checked ~ .pgp-overlay,
#pgp:checked ~ .pgp-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#pgp:checked ~ .pgp-panel {
    transform: translateY(0);
}

.overlay-lock {
    overscroll-behavior: contain;
}

.fixed-toggle {
    position: fixed !important;

    top: 50vh !important;
    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   JavaScript strike graphic
   ============================================================ */

.js-strike {
    position: relative;

    display: inline-block;
}

.js-strike::after {
    content: "";

    position: absolute;

    left: -15%;
    right: -15%;
    top: 50%;

    height: 1.7em;

    pointer-events: none;

    opacity: 0.9;

    background:
            url("/images/textcrossout.png")
            no-repeat
            center / 100% 100%;

    transform:
            translateY(-50%)
            rotate(-5deg);
}

/* ============================================================
   Accessibility / resilience
   ============================================================ */

a:focus-visible,
label:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-edge);
    outline-offset: 2px;

    border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;

        scroll-behavior: auto !important;
    }
}