/* ==========================================================================
   theme.css - design tokens

   Ported directly from the launcher's content palette (App.axaml). The launcher
   deliberately keeps its work surface dark under every OS theme because the UI
   is designed against the hero artwork, which does not change. The site inherits
   that decision, so the two read as one product.

   Do not introduce colours outside this file. If something needs a shade that is
   not here, the palette is wrong, not the component.
   ========================================================================== */

:root {
    /* --- surfaces, darkest to lightest ---------------------------------- */
    --c-bg:         #1B1B1D;   /* page */
    --c-subhead:    #1E1E21;   /* recessed strip: column headers */
    --c-card:       #232326;   /* card body */
    --c-head:       #2A2A2E;   /* card title strip, sits proud of the body */
    --c-hover:      #2E2E33;
    --c-active:     #3A3A40;

    /* --- lines ---------------------------------------------------------- */
    --c-border:     #323236;   /* card outline */
    --c-rule:       #2C2C31;   /* row separator, deliberately fainter */

    /* --- text ----------------------------------------------------------- */
    --c-text:       #D4D1C9;
    --c-muted:      #8C8C92;

    /* --- accent: the muted olive-gold used throughout the launcher ------ */
    --c-accent:     #B8A46A;
    --c-accent-hi:  #C7B47E;

    /* --- the one loud control ------------------------------------------- */
    /* Brand orange from the original launcher, NOT the accent above. The
       accent is tuned to sit quietly in chrome; as a call-to-action it reads
       dull. This is the only element that should shout. */
    --c-cta:        #E89C45;
    --c-cta-hi:     #F5B956;
    --c-cta-lo:     #C9822F;
    --c-on-cta:     #17170F;   /* near-black: sits on orange, never a theme colour */

    /* --- semantic ------------------------------------------------------- */
    --c-online:     #4CC38A;
    --c-offline:    #F14C4C;
    --c-combat:     #E0A33E;

    /* --- factions ------------------------------------------------------- */
    --c-aresden:    #D08A4A;
    --c-elvine:     #5E9BD1;
    --c-neutral:    #8C8C92;

    /* --- type scale ----------------------------------------------------
       The launcher's four steps (10/11/12/13 px) scaled for web reading
       distance. Four steps and no more: mixing 9/10.5/11.5/12/13 is what made
       the launcher's cards read as noise before they were normalised. */
    --fs-micro:  0.6875rem;   /* 11px - letterspaced uppercase labels, chips */
    --fs-meta:   0.75rem;     /* 12px - secondary values, timestamps */
    --fs-body:   0.875rem;    /* 14px - primary row text */
    --fs-lead:   1rem;        /* 16px - entry headlines */

    --ls-micro: 0.09em;       /* uppercase labels need the air */
    --ls-label: 0.14em;       /* nav and section titles */

    /* --- geometry ------------------------------------------------------- */
    --r-card:   5px;
    --r-chip:   2px;
    --r-ctl:    3px;
    --shell:    1240px;

    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica,
            Arial, sans-serif;
}

/* ---------------------------------------------------------------- reset -- */

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

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

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.55;
    /* The page is dark in every state; tell the UA so form controls and
       scrollbars follow instead of rendering light chrome against it. */
    color-scheme: dark;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hi); }

button { font: inherit; color: inherit; cursor: pointer; }

/* Visible focus for keyboard users only - a permanent ring on click is noise,
   but removing it entirely strands anyone navigating by keyboard. */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   prefers-reduced-motion: REMOVED, deliberately.
   ---------------------------------------------------------------------------
   There used to be a blanket rule here flattening every animation and
   transition on the site when the OS asked for less motion. It was removed on
   request: Windows ships with animation effects off on a lot of machines, and
   the practical result was that nobody with that default ever saw any of the
   site's motion - including the administration drawer, where the movement is
   what tells you where a panel opened and what it pushed down.

   This is a real trade. Anyone who set the preference because motion makes
   them unwell now gets the drifting hero on the front page and the spinners at
   full speed. If that turns out to matter, put it back verbatim:

       @media (prefers-reduced-motion: reduce) {
           *, *::before, *::after {
               animation-duration: 0.01ms !important;
               animation-iteration-count: 1 !important;
               transition-duration: 0.01ms !important;
               scroll-behavior: auto !important;
           }
       }

   A narrower version is also possible - suppress the hero drift and the
   spinner, keep the interface transitions - if the blanket rule is too much
   but none at all is too little.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------ scrollbar -- */
/*
   Two syntaxes, deliberately. The standard properties are the future and are
   all Firefox has ever supported; the ::-webkit- pseudo-elements are still what
   Safari and older Chrome read. Declaring only one leaves half the browsers on
   a pale default bar against a near-black page.

   Standard first so WebKit's more specific rules win where both are understood.
*/
html {
    scrollbar-width: thin;
    scrollbar-color: var(--c-active) var(--c-subhead);   /* thumb, track */
}

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

::-webkit-scrollbar-track {
    background: var(--c-subhead);
}

::-webkit-scrollbar-thumb {
    background: var(--c-active);
    border-radius: 6px;
    /* Transparent border with background-clip insets the thumb, so it reads as
       a floating handle rather than a bar welded to the gutter. */
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #4C4C55; background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--c-accent); background-clip: content-box; }

/* Where the vertical and horizontal bars meet. Left unstyled it renders as a
   light square in the bottom-right corner. */
::-webkit-scrollbar-corner { background: var(--c-subhead); }

/* Screen-reader-only text that still receives focus. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}