/* =====================================================================
   OffensiveRamen skin — the ONLY differentiator from CyberRamen's system.
   Load order per page: fonts.css, main.css, shell.css, skin-offensive.css,
   then the page stylesheet (home.css | tools.css | cheatsheets.css).

   It does three things:
     1. Overrides CyberRamen's palette tokens to a dark-red "spicy" skin.
     2. Aliases OffensiveRamen's legacy token names (--bg2, --panel, --dim,
        --red2, --ember, --sans, --mono, …) onto the new palette + fonts, so
        the existing tool-widget and cheat-sheet CSS keep working, re-skinned.
     3. Carries the authorized-use gate styles (previously in style.css).
   OffensiveRamen is dark-only, so the palette is forced regardless of the
   visitor's colour-scheme preference.
   ===================================================================== */

:root {
    color-scheme: dark;

    /* --- CyberRamen palette tokens, offensive skin --- */
    --cream:        #120d0d;   /* page background            */
    --cream-dark:   #1a1414;   /* cards / elevated surfaces   */
    --cream-darker: #2b2020;   /* borders / dividers          */
    --ink:          #f4ecec;
    --ink-light:    #d9c9c9;
    --ink-muted:    #b39c9c;   /* 5.9:1 on --cream            */
    --ink-faint:    #b39c9c;
    --ink-faint-decorative: #7a6f65;
    --red:          #ff5a4d;   /* links / accents, ~5.2:1 on --cream */
    --red-hover:    #ff7a1a;   /* ember glow on hover                */
    --red-dim:      rgba(255, 90, 77, 0.12);
    --border-control: rgba(244, 236, 236, 0.45);
    --surface: #1a1414; --surface-2: #201818;
    --code-bg: #0a0707; --code-ink: #f4ecec;
    --on-dark: #f4ecec; --on-accent: #120d0d;
    --wash: rgba(244,236,236,0.06); --wash-strong: rgba(244,236,236,0.12);
    --color-error: #ff8a78; --color-success: #8fd494; --color-warning: #ffb257;
    --sev-low: #8fb6f0;      --sev-low-bg: rgba(143,182,240,0.16);
    --sev-medium: #ffb257;   --sev-medium-bg: rgba(255,178,87,0.16);
    --sev-high: #ff9463;     --sev-high-bg: rgba(255,148,99,0.16);
    --sev-critical: #ff5a4d; --sev-critical-bg: rgba(255,90,77,0.18);
    --sev-good: #8fd494;     --sev-good-bg: rgba(143,212,148,0.16);

    /* --- OffensiveRamen legacy token aliases (tools.css, cheatsheets.css) --- */
    --bg:   var(--cream);
    --bg2:  var(--cream-dark);
    --panel: var(--cream-dark);
    --dim:  var(--ink-muted);
    --line: var(--cream-darker);
    --red2: #ff7a6b;           /* bright accent / hover for widgets */
    --ember: #ff7a1a;
    --mono: var(--font-mono);
    --sans: var(--font-mono);  /* body text is mono, like CyberRamen */
    --wrap: 1060px;
}

/* Beat CyberRamen's own dark-mode block for dark-scheme visitors. */
@media (prefers-color-scheme: dark) {
    :root {
        --cream: #120d0d; --cream-dark: #1a1414; --cream-darker: #2b2020;
        --ink: #f4ecec; --ink-light: #d9c9c9; --ink-muted: #b39c9c; --ink-faint: #b39c9c;
        --red: #ff5a4d; --red-hover: #ff7a1a; --red-dim: rgba(255,90,77,0.12);
        --surface: #1a1414; --surface-2: #201818; --code-bg: #0a0707;
    }
}

/* Faint ember wash at the top of every page (echoes the old landing). */
body {
    background:
        radial-gradient(1200px 420px at 78% -100px, rgba(255,122,26,0.10), transparent 60%),
        var(--cream);
}

/* Wordmark: "Offensive" in ink, "Ramen" in the hot accent. */
.sh__wordmark .cyber, .sf__brand .cyber { color: var(--red); }

/* Global focus ring in the ember accent. */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* =====================================================================
   Authorized-use gate (moved from the retired style.css; re-tokenised).
   ===================================================================== */
.gate {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(6,4,4,.86); backdrop-filter: blur(3px);
}
.gate[hidden] { display: none; }
.gate-card {
    background: var(--bg2); border: 1px solid var(--line);
    border-top: 4px solid var(--red); border-radius: 4px;
    max-width: 460px; width: 100%; padding: 28px 26px; text-align: center;
}
.gate-mark { font-size: 2.2rem; }
.gate-card h2 { font-family: var(--font-display); font-size: 1.4rem; margin: .3em 0 .5em; }
.gate-card p { color: var(--dim); font-size: .98rem; }
.gate-card strong { color: var(--ember); }
.gate-card button {
    margin: 1.3em 0 .6em; min-height: 48px; width: 100%;
    background: var(--red); color: var(--on-accent);
    border: 0; border-radius: 2px; font-weight: 800; font-size: 1rem; cursor: pointer;
    font-family: var(--font-mono);
}
.gate-card button:hover, .gate-card button:focus-visible { background: var(--red-hover); }
.gate-fine { font-size: .8rem; font-family: var(--font-mono); }

/* =====================================================================
   House rules — kept from the previous landing, restyled in the system.
   ===================================================================== */
.or-section { margin: 2.6rem 0; }
.or-section > h2 {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: -0.01em; margin-bottom: 0.7rem;
}
.rules { list-style: none; display: grid; gap: 12px; max-width: 72ch; margin: 0; padding: 0; }
.rules li { padding-left: 1.7em; position: relative; color: var(--ink); line-height: 1.6; }
.rules li::before { content: "🌶"; position: absolute; left: 0; top: 0; }
.rules strong { color: var(--ember); }