/* ==========================================================================
   Rainynight — Retro Hotel · Visueel systeem (single source of truth)
   --------------------------------------------------------------------------
   Canonieke `--rainy-*` designtokens: nachtblauw, warm amber, spacing,
   typografie, radius, cards en pixelaccenten. Herbruikbaar in website,
   onboarding en housekeeping.

   Injectieroute: statische <link> ná @vite in de <head>, met filemtime-
   cachebust. Puur CSS-variabelen → geen build/rebuild nodig. Waarden zijn
   1-op-1 gelijk aan de bestaande game-shell (kleurdrift = nul).
   ========================================================================== */

:root {
    /* -- Nachtblauw (basis / oppervlakken) --------------------------------- */
    --rainy-night: #15133c;       /* basis-achtergrond (bestaande waarde)    */
    --rainy-night-2: #211a3f;     /* iets lichter paneelvlak                 */
    --rainy-night-3: #211d52;     /* accent-oppervlak / hover                */

    /* -- Warm amber (accent) ---------------------------------------------- */
    --rainy-accent-1: #eeb425;    /* diep amber                              */
    --rainy-accent-2: #e9b124;    /* amber                                   */
    --rainy-accent-3: #f5ba44;    /* helder amber (= huidige --rainy-accent) */
    --rainy-accent-4: #ffd06d;    /* zacht/licht amber (highlight)           */
    --rainy-accent: var(--rainy-accent-3); /* alias, backwards-compatible    */

    /* -- Semantische oppervlakken / tekst (bestaande waarden) ------------- */
    --rainy-panel: rgba(26, 24, 65, 0.9);
    --rainy-border: rgba(255, 255, 255, 0.16);
    --rainy-text: #ffffff;
    --rainy-muted: #c9c5ef;

    /* -- Spacing-schaal (rem) --------------------------------------------- */
    --rainy-space-1: 0.25rem;   /* 4px  */
    --rainy-space-2: 0.5rem;    /* 8px  */
    --rainy-space-3: 0.75rem;   /* 12px */
    --rainy-space-4: 1rem;      /* 16px */
    --rainy-space-5: 1.5rem;    /* 24px */
    --rainy-space-6: 2rem;      /* 32px */

    /* -- Radius ------------------------------------------------------------ */
    --rainy-radius-sm: 6px;
    --rainy-radius-md: 11px;   /* game-shell knoppen                        */
    --rainy-radius-lg: 16px;   /* game-shell panelen                        */
    --rainy-radius-pill: 999px;

    /* -- Typografie -------------------------------------------------------- */
    --rainy-font-sans: "Nunito", "Poppins", system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rainy-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas",
        monospace;
    --rainy-size-xs: 0.75rem;   /* 12px */
    --rainy-size-sm: 0.875rem;  /* 14px */
    --rainy-size-md: 1rem;      /* 16px */
    --rainy-size-lg: 1.25rem;   /* 20px */
    --rainy-size-xl: 1.75rem;   /* 28px */
    --rainy-weight-normal: 400;
    --rainy-weight-medium: 600;
    --rainy-weight-bold: 700;

    /* -- Pixelaccent (retro) ---------------------------------------------- */
    --rainy-pixel-size: 4px;              /* dikte van pixel-randen          */
    --rainy-shadow-card: 0 10px 32px rgba(0, 0, 0, 0.28);
}

/* Dark-scope: het thema is al nachtelijk; deze blok herbevestigt de tokens
   zodat niets `undefined` wordt wanneer een dark-class actief is. */
html.dark,
.dark,
html.app.dark {
    --rainy-night: #15133c;
    --rainy-night-2: #211a3f;
    --rainy-night-3: #211d52;
    --rainy-accent: var(--rainy-accent-3);
    --rainy-panel: rgba(26, 24, 65, 0.9);
    --rainy-border: rgba(255, 255, 255, 0.16);
    --rainy-text: #ffffff;
    --rainy-muted: #c9c5ef;
}

/* ==========================================================================
   Herbruikbare componenten
   ========================================================================== */

/* Card — nachtblauw paneel met amber-randlicht bij hover. */
.rainy-card {
    display: block;
    padding: var(--rainy-space-5);
    border: 1px solid var(--rainy-border);
    border-radius: var(--rainy-radius-lg);
    background: var(--rainy-panel);
    color: var(--rainy-text);
    box-shadow: var(--rainy-shadow-card);
    font-family: var(--rainy-font-sans);
}

.rainy-card__title {
    margin: 0 0 var(--rainy-space-2);
    font-size: var(--rainy-size-lg);
    font-weight: var(--rainy-weight-bold);
    color: var(--rainy-text);
}

.rainy-card__muted {
    color: var(--rainy-muted);
    font-size: var(--rainy-size-sm);
}

/* Pixelaccent-utility's — harde retro-randen in amber/nachtblauw. */
.rainy-pixel-border {
    border: var(--rainy-pixel-size) solid var(--rainy-accent);
    border-radius: 0;                /* pixels zijn scherp, geen rondingen  */
    image-rendering: pixelated;
}

.rainy-pixel-rule {
    height: var(--rainy-pixel-size);
    border: 0;
    background: repeating-linear-gradient(
        90deg,
        var(--rainy-accent) 0,
        var(--rainy-accent) var(--rainy-pixel-size),
        transparent var(--rainy-pixel-size),
        transparent calc(var(--rainy-pixel-size) * 2)
    );
}

.rainy-pixel-accent {
    color: var(--rainy-accent);
    text-shadow: var(--rainy-pixel-size) var(--rainy-pixel-size) 0
        var(--rainy-night-3);
}