/* =========================================================================
   Response Roleplay — base.css
   Design tokens, reset, typography, container, gradient accent.
   ========================================================================= */

/* --- Design tokens ----------------------------------------------------- */

:root {
    /* Palette */
    --rrp-bg:           #070b14;            /* Page background */
    --rrp-bg-elev:      #0c1424;            /* Slightly raised surface (nav, footer) */
    --rrp-glass:        rgba(7, 11, 20, 0.92);  /* Card / panel */
    --rrp-glass-soft:   rgba(255, 255, 255, 0.04);

    /* Brand */
    --rrp-accent:       #e10032;            /* Brand red */
    --rrp-accent-hi:    #ff1a4c;            /* Hover/active red */
    --rrp-blue:         #3498db;            /* Department blue / secondary accent */
    --rrp-purple:       #8e44ad;            /* Mid stop in the brand gradient */
    --rrp-orange:       #f59e0b;            /* Warning / paused status */
    --rrp-green:        #22c55e;            /* Success / open status */
    --rrp-discord:      #5865F2;            /* Discord blurple */

    /* Text */
    --rrp-text:         #ffffff;
    --rrp-text-body:    #d8dde6;
    --rrp-text-dim:     #8a93a6;
    --rrp-text-muted:   #5d6678;

    /* Lines & dividers */
    --rrp-border:       rgba(255, 255, 255, 0.08);
    --rrp-border-soft:  rgba(255, 255, 255, 0.04);

    /* Dark surface tokens — used by admin and any shared dropdown/menu UI */
    --admin-surface:        #0e1626;
    --admin-border:         rgba(255, 255, 255, 0.06);
    --admin-border-strong:  rgba(255, 255, 255, 0.12);

    /* Shadows */
    --rrp-shadow-card:  0 24px 60px -16px rgba(0, 0, 0, 0.65);
    --rrp-shadow-lift:  0 8px 24px -8px rgba(0, 0, 0, 0.5);

    /* Radii */
    --rrp-r-sm:         4px;
    --rrp-r:            6px;
    --rrp-r-md:         8px;
    --rrp-r-lg:         10px;
    --rrp-r-xl:         14px;

    /* Layout */
    --rrp-container:    1200px;          /* Body content (prose, forms, tables) */
    --rrp-nav-width:    1560px;          /* Nav stretches wider for menu items */
    --rrp-gutter:       24px;

    /* Typography */
    --rrp-font-display: 'Bebas Neue', sans-serif;
    --rrp-font-body:    'Barlow Condensed', sans-serif;
    --rrp-font-mono:    'DM Mono', ui-monospace, monospace;

    /* Brand gradient (use as a thin line; never as a fill) */
    --rrp-gradient:     linear-gradient(90deg, #e10032 0%, #8e44ad 50%, #3498db 100%);
}

/* --- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--rrp-bg);
    color: var(--rrp-text-body);
    font-family: var(--rrp-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; }

a {
    color: var(--rrp-text);
    text-decoration: none;
    transition: color 120ms ease;
}
a:not(.btn):hover { color: var(--rrp-accent); }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
    border: 0;
    border-top: 1px solid var(--rrp-border);
    margin: 24px 0;
}

/* --- Typography -------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rrp-font-display);
    font-weight: 400;             /* Bebas Neue ships single-weight */
    color: var(--rrp-text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.1;
}

h1 { font-size: clamp(36px, 5.5vw, 64px); letter-spacing: 2px; }
h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: 2px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; letter-spacing: 2px; color: var(--rrp-text-dim); }
h6 { font-size: 14px; letter-spacing: 2px; color: var(--rrp-text-dim); }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

strong { color: var(--rrp-text); font-weight: 600; }

small { font-size: 13px; color: var(--rrp-text-dim); }

/* --- Utility classes --------------------------------------------------- */

.container {
    max-width: var(--rrp-container);
    margin: 0 auto;
    padding: 0 var(--rrp-gutter);
}

.mono { font-family: var(--rrp-font-mono); }

.accent-text { color: var(--rrp-accent); }

.dim { color: var(--rrp-text-dim); }

.uppercase {
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.eyebrow {
    display: inline-block;
    font-family: var(--rrp-font-display);
    color: var(--rrp-accent);
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.lede {
    font-family: var(--rrp-font-body);
    font-weight: 400;
    font-size: 18px;
    color: var(--rrp-text-dim);
    max-width: 60ch;
}

/* --- Brand gradient line ---------------------------------------------- */
/* Use sparingly — top/bottom of hero panels, section dividers, footer.   */

.accent-gradient {
    height: 2px;
    width: 100%;
    background: var(--rrp-gradient);
    border: 0;
}

.accent-gradient.thin    { height: 1px; }
.accent-gradient.thick   { height: 3px; }

/* --- Section pattern --------------------------------------------------- */

.section {
    padding: 72px 0;
}
.section.tight  { padding: 48px 0; }
.section.loose  { padding: 104px 0; }

.section-head {
    text-align: center;
    margin-bottom: 48px;
}
.section-head .eyebrow { margin-bottom: 12px; }
.section-head h2 { margin-bottom: 12px; }
.section-head .lede { margin: 0 auto; }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 768px) {
    :root { --rrp-gutter: 16px; }
    .section { padding: 56px 0; }
    .section.loose { padding: 72px 0; }
}

/* --- Scrollbar --------------------------------------------------------- */
/* WebKit gives full control; Firefox uses the standard color/width props. */
/* Applies globally — any `.table-wrap` or overflow container inherits.    */

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    /* Transparent border + padding-box clip creates breathing room around */
    /* the thumb without needing to know the underlying surface color.     */
    background-color: rgba(255, 255, 255, 0.12);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
    transition: background-color 120ms ease;
}
::-webkit-scrollbar-thumb:hover  { background-color: var(--rrp-accent); }
::-webkit-scrollbar-thumb:active { background-color: var(--rrp-accent-hi); }

::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- Selection / focus ------------------------------------------------- */

::selection { background: var(--rrp-accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--rrp-accent);
    outline-offset: 2px;
}