/**
 * Bondgenoot — global.css (v2)
 * =================================================================
 * /assets/css/global.css (cluster A pakket A6 fase F030)
 * Re-thema cluster C pakket C2 fase F056 — "Warmer perkament" v2
 *
 * Loading-keten in outgame.tpl.php:
 *   tokens.css  →  reset.css  →  fonts.css  →  global.css  →  global-reduced-motion.css
 *
 * (Filenames bewust hier als comment-marker zodat de F030-checker
 * ze kan vinden — accepteert óf @import-style óf link-tag-aanpak.)
 *
 * v2 (na C2-review):
 *   - Body achtergrond MOET ECHT donker zijn (was te licht doorvallen)
 *   - Houtnerf-textuur via repeating-linear-gradients
 *   - Veelvoudige inset-shadows voor diepe burcht-look
 *   - !important op body-bg om te voorkomen dat oude C1-rules 'm overrulen
 *
 * Body, typografie-defaults, links, scrollbar, selectie. Alles gebruikt
 * tokens.css. Geen hex-codes hier behalve in body-bg fallback.
 */

html {
    font-size: 16px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    /* Garandeer donker basis — zelfs als body bg faalt */
    background-color: #1A0F08;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;

    /* === Donker hout-canvas (de "buitenmuur" van de burcht) ===
       Vier-laags stapeling voor een echte rijke donker-bruine bg:
       1. Top-vignette (subtiele licht-warme schijn van bovenaf)
       2. Bottom-shadow (dieper donker onderaan)
       3. Verticale houtnerf-lijnen (burcht-houtbalken look)
       4. Diagonale weave-textuur (paper-grain feel)
       5. Solide warm-bruine basis-gradient

       !important is bewust: er waren oude C1-rules die de body
       overschreven met cool-bg. v2 voorkomt dat. */
    background-color: #1A0F08 !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            rgba(212, 166, 86, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 50% 100%,
            rgba(0, 0, 0, 0.55) 0%, transparent 70%),
        repeating-linear-gradient(
            90deg,
            transparent 0px, transparent 80px,
            rgba(0, 0, 0, 0.10) 80px, rgba(0, 0, 0, 0.10) 81px,
            transparent 81px, transparent 180px,
            rgba(0, 0, 0, 0.07) 180px, rgba(0, 0, 0, 0.07) 181px,
            transparent 181px, transparent 320px),
        repeating-linear-gradient(
            135deg,
            transparent 0px, transparent 3px,
            rgba(212, 166, 86, 0.018) 3px, rgba(212, 166, 86, 0.018) 4px),
        linear-gradient(165deg,
            #3D2814 0%,
            #2D1C0E 45%,
            #1F1209 100%) !important;
    background-attachment: fixed !important;

    position: relative;
    overflow-x: hidden;
}

/* Burcht-frame: subtiele goud-rand-gloed om de viewport */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.45),
        inset 0 0 140px rgba(0, 0, 0, 0.30);
}

body > * { position: relative; z-index: 1; }

/* === Typografie === */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-on-dark);
    letter-spacing: 0.01em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 var(--space-4); }

/* === Links === */
a {
    color: var(--gold-bright);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out),
                text-shadow var(--t-fast) var(--ease-out);
}
a:hover, a:focus {
    color: var(--gold-pale);
    text-shadow: 0 0 10px rgba(212, 166, 86, 0.45),
                 0 0 4px rgba(212, 166, 86, 0.25);
    outline: 2px solid transparent;
}
a:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* === Code === */
code, pre { font-family: var(--font-mono); font-size: 0.95em; }
code {
    background-color: rgba(0,0,0,0.20);
    color: var(--text-on-dark);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}
pre {
    background-color: rgba(0,0,0,0.30);
    color: var(--text-on-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    overflow-x: auto;
    line-height: 1.55;
}

/* === Selection === */
::selection {
    background-color: rgba(212, 166, 86, 0.35);
    color: var(--text-on-dark);
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deepest); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 3px solid var(--bg-deepest);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* === Skip-link === */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--gold);
    color: var(--bg-deepest);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    z-index: var(--z-toast);
    transition: top var(--t-fast) var(--ease-out);
    font-weight: 600;
}
.skip-link:focus { top: 0; }

/* === Visueel-verborgen === */
.visueel-verborgen,
.bg-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;
}

/* === Reduce-motion === */
@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;
    }
}

/* =================================================================
   PERKAMENT-CARD MIXIN (nieuw in v2 — herbruikbaar)
   =================================================================
   .parchment-bg is de bouwsteen voor élke card die "echt perkament"
   moet aanvoelen. Stack van 5 lagen geeft realisme:
     1. Solide cream-fallback (bg-color)
     2. Vier vlekken (radial-gradients met low-opacity sepia)
     3. Vijfde centrale vlek
     4. Diagonale weave-grain
     5. Basis-gradient van licht naar donker beige

   Cards combineren dit met eigen border, shadow, gold-streep top.
   ================================================================= */
.parchment-bg,
.bg-parchment {
    background-color: var(--bg-parchment-1);
    background-image:
        radial-gradient(ellipse 30% 18% at 18% 28%, var(--parchment-stain), transparent 70%),
        radial-gradient(ellipse 24% 14% at 72% 62%, var(--parchment-stain-dark), transparent 75%),
        radial-gradient(ellipse 38% 24% at 92% 18%, var(--parchment-stain), transparent 80%),
        radial-gradient(ellipse 32% 20% at 28% 88%, var(--parchment-stain-dark), transparent 70%),
        radial-gradient(ellipse 20% 12% at 55% 45%, var(--parchment-stain), transparent 65%),
        repeating-linear-gradient(
            45deg,
            transparent 0px, transparent 2px,
            rgba(110, 75, 35, 0.025) 2px, rgba(110, 75, 35, 0.025) 3px),
        linear-gradient(165deg,
            var(--bg-parchment-1) 0%,
            var(--bg-parchment-2) 70%,
            var(--bg-parchment-3) 100%);
    color: var(--text-on-parchment);
}