/* =========================================================
   n1F DESIGN TOKENS
   ---------------------------------------------------------
   This file is the single source of truth for the visual
   identity: colors, per-world accent/font mapping, and the
   shared panel treatment used across the site.

   Everything in user/themes/n1f/css/custom.css, worlds.css
   and responsive.css consumes these as var(...) references.
   To build an alternate visual design for the exact same
   n1F "system" (worlds, tracks, releases, personas, forms),
   this is the one file that should need to change:

     - swap the four @font-face definitions for different
       display fonts
     - change the per-world --world-font-display / accent
       colors below
     - adjust --n1f-panel-bg / --n1f-panel-radius for a
       different "panel" look

   Layout, structure, and behaviour (grids, spacing, motion,
   FX layers) live in the other CSS files and the Twig
   templates, and should not need to change.
========================================================= */

/* ---------- Display fonts (self-hosted) ---------- */

@font-face {
    font-family: "N1F Montserrat";
    src:
        url("../fonts/Montserrat-ExtraBold.ttf.woff") format("woff"),
        url("../fonts/Montserrat Extra Bold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "N1F Orbitron";
    src: url("../fonts/orbitron-bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "N1F Bebas";
    src:
        url("../fonts/BebasNeue-Regular.woff2") format("woff2"),
        url("../fonts/BebasNeue-Regular.woff") format("woff"),
        url("../fonts/BebasNeue-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "N1F Marker";
    src: url("../fonts/PermanentMarker-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "N1F Cinzel";
    src: url("../fonts/Cinzel-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Core tokens (world-independent) ---------- */

:root {

    /* ========= CORE ========= */

    --n1f-bg: #050505;

    --n1f-text: #f5f5f5;

    --n1f-soft-text: rgba(255,255,255,0.72);

    --n1f-border: rgba(255,255,255,0.08);

    --n1f-border-soft: rgba(255,255,255,0.04);

    --n1f-panel-radius: 18px;

    --n1f-glow-white:
        0 0 10px rgba(255,255,255,0.10),
        0 0 26px rgba(255,255,255,0.04);

    --n1f-shadow-soft:
        0 12px 32px rgba(0,0,0,0.32);

    --n1f-transition:
        220ms cubic-bezier(.2,.8,.2,1);

    /* Shared "glass panel" background used by every panel-style
       section (world hero, detail shell, release hero/tracklist,
       music system). One value, reused via var(--n1f-panel-bg). */
    --n1f-panel-bg:
        linear-gradient(
            180deg,
            rgba(8,8,14,0.72),
            rgba(4,4,8,0.88)
        );

    /* ========= GENRES ========= */

    --electronic: #8f5cff;

    --electronic-glow:
        0 0 18px rgba(143,92,255,0.34);

    --rock: #ff4747;

    --rock-glow:
        0 0 18px rgba(255,71,71,0.30);

    --urban: #58e8ff;

    --urban-glow:
        0 0 18px rgba(88,232,255,0.28);

    --voice: #f1c878;

    --voice-glow:
        0 0 18px rgba(241,200,120,0.30);
}

/* ---------- Per-world tokens ----------
   Each world defines: an accent color (+ soft/glow/rgb variants
   for borders, shadows and rgba() composition) and a display
   font stack used for headings/nav across the whole site.
------------------------------------------------------------ */

body[data-world="neutral"] {
    --world-accent: rgba(255,255,255,0.82);
    --world-accent-soft: rgba(255,255,255,0.22);
    --world-accent-glow: rgba(255,255,255,0.14);
    --world-accent-rgb: 255,255,255;
    --world-font-display: "N1F Montserrat", sans-serif;
}

body[data-world="electronic"] {
    --world-accent: var(--electronic);
    --world-accent-soft: rgba(143,92,255,0.24);
    --world-accent-glow: rgba(143,92,255,0.18);
    --world-accent-rgb: 143,92,255;
    --world-font-display: "N1F Orbitron", sans-serif;
}

body[data-world="rock"] {
    --world-accent: var(--rock);
    --world-accent-soft: rgba(255,71,71,0.24);
    --world-accent-glow: rgba(255,71,71,0.18);
    --world-accent-rgb: 255,71,71;
    --world-font-display: "N1F Bebas", "Arial Black", sans-serif;
}

body[data-world="urban"] {
    --world-accent: var(--urban);
    --world-accent-soft: rgba(88,232,255,0.24);
    --world-accent-glow: rgba(88,232,255,0.18);
    --world-accent-rgb: 88,232,255;
    --world-font-display: "N1F Marker", "Comic Sans MS", cursive;
}

body[data-world="voice"] {
    --world-accent: var(--voice);
    --world-accent-soft: rgba(241,200,120,0.24);
    --world-accent-glow: rgba(241,200,120,0.18);
    --world-accent-rgb: 241,200,120;
    --world-font-display: "N1F Cinzel", Georgia, serif;
}