/* =========================================================
BGG LOFT — FRAMEWORK
Global Variables, Themes & Core App Styling
========================================================= */

/* =========================================================
RESET
========================================================= */

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

/* =========================================================
ROOT VARIABLES
========================================================= */

:root {

/* -----------------------------------------
LAYOUT WIDTHS
----------------------------------------- */

--layout-narrow: 520px;
--layout-normal: 1200px;
--layout-wide: 1600px;

--layout-padding: 20px;


/* -----------------------------------------
   TYPOGRAPHY
----------------------------------------- */

--font-primary: 'Nunito', sans-serif;
--font-display: 'Orbitron', sans-serif;
--font-logo: 'Kristi', cursive;


/* -----------------------------------------
   APP BACKGROUND
----------------------------------------- */

--bg-primary: #101214;
--bg-secondary: #1a1d21;
--game-background: none;

--bg-overlay:
    radial-gradient(
        circle at top right,
        rgba(255,255,255,0.025),
        transparent 30%
    );

--bg-main:
    linear-gradient(
        180deg,
        var(--bg-primary),
        var(--bg-secondary)
    );


/* -----------------------------------------
   TEXT
----------------------------------------- */

--text-primary: #edf1f7;
--text-secondary: #9aa3b2;
--text-muted: #6f7b8d;


/* -----------------------------------------
   SURFACES
----------------------------------------- */

--surface-primary: rgba(22,24,28,0.92);
--surface-secondary: rgba(255,255,255,0.03);

--surface-hover: rgba(255,255,255,0.06);

--surface-border-soft: rgba(255,255,255,0.08);
--surface-border: rgba(255,255,255,0.25);
--surface-border-active: rgba(255, 255, 255, 0.5);

--surface-blur: blur(16px);


/* -----------------------------------------
SPACING
----------------------------------------- */

--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;


/* -----------------------------------------
LAYERS
----------------------------------------- */

--z-base: 1;
--z-overlay: 100;
--z-header: 500;
--z-dropdown: 700;
--z-modal: 900;
--z-toast: 1100;


/* -----------------------------------------
RADIUS
----------------------------------------- */

--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;


/* -----------------------------------------
   CARD SYSTEM
----------------------------------------- */

--card-bg: rgba(24, 10, 32, 0.88);

--card-overlay:
    linear-gradient(
        90deg,
        rgba(8, 8, 12, 0.92) 0%,
        rgba(8, 8, 12, 0.86) 45%,
        rgba(8, 8, 12, 0.72) 100%
    );

--card-border: rgba(255,255,255,0.08);
--card-divider: rgba(255,255,255,0.08);

--card-radius: 22px;


/* -----------------------------------------
   EFFECTS
----------------------------------------- */

--glow-primary: rgba(255, 0, 127, 0.35);

--shadow-soft:
    0 0 12px rgba(0,0,0,0.18);

--shadow-medium:
    0 0 24px rgba(0,0,0,0.28);

--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;


/* -----------------------------------------
   STATUS COLORS
----------------------------------------- */

--color-success: #00d68f;
--color-warning: #FFD300;
--color-danger: #ff2a2a;
--color-info: #00d9ff;

--color-purple: #b68cff;

--theme-favorite: #FFD300;
--theme-favorite-border: rgba(255, 211, 0, 0.28);
--theme-favorite-bg: rgba(255, 211, 0, 0.08);
--theme-favorite-hover: rgba(255, 211, 0, 0.18);
--theme-favorite-hover-border: rgba(255, 211, 0, 0.45);


/* -----------------------------------------
   ACTIVE THEME DEFAULT
----------------------------------------- */

--theme-primary: #ff007f;
--theme-secondary: #8b2cff;
--theme-muted: #9aa3b2;

--theme-glow: rgba(255, 0, 127, 0.35);

--theme-button-start: #ff007f;
--theme-button-end: #8b2cff;

}

/* =========================================================
THEMES
========================================================= */

/* -----------------------------------------
NIGHT CITY
----------------------------------------- */

body.theme-nightcity {

--theme-primary: #ff007f;
--theme-secondary: #8b2cff;

--theme-glow: rgba(255, 0, 127, 0.35);

--card-bg: rgba(24, 10, 32, 0.88);

--theme-button-start: #ff007f;
--theme-button-end: #8b2cff;

}

/* -----------------------------------------
ARASAKA
----------------------------------------- */

body.theme-arasaka {

--theme-primary: #ff2a2a;
--theme-secondary: #7a0000;

--theme-glow: rgba(255, 42, 42, 0.35);

--card-bg: rgba(20, 4, 4, 0.92);

--theme-button-start: #ff2a2a;
--theme-button-end: #7a0000;

}

/* -----------------------------------------
EDGERUNNER
----------------------------------------- */

body.theme-edgerunner {

--theme-primary: #FFD300;
--theme-secondary: #ff9900;

--theme-glow: rgba(255, 211, 0, 0.35);

--card-bg: rgba(18, 18, 4, 0.92);

--theme-button-start: #FFD300;
--theme-button-end: #ff9900;

}

/* -----------------------------------------
TRAUMA TEAM
----------------------------------------- */

body.theme-trauma {

--theme-primary: #00ff88;
--theme-secondary: #008f4c;

--theme-glow: rgba(0, 255, 136, 0.35);

--card-bg: rgba(4, 18, 10, 0.92);

--theme-button-start: #00ff88;
--theme-button-end: #008f4c;

}

/* -----------------------------------------
NETRUNNER
----------------------------------------- */

body.theme-netrunner {

--theme-primary: #00d9ff;
--theme-secondary: #0055ff;

--theme-glow: rgba(0, 217, 255, 0.35);

--card-bg: rgba(4, 10, 20, 0.92);

--theme-button-start: #00d9ff;
--theme-button-end: #0055ff;

}

/* -----------------------------------------
NEUTRAL
----------------------------------------- */

body.theme-neutral {

--theme-primary: #b08d57;
--theme-secondary: #4b5563;

--theme-glow: rgba(176, 141, 87, 0.25);

--card-bg: rgba(4, 10, 20, 0.92);

--theme-button-start: #b08d57;
--theme-button-end: #4b5563;

}


/* =========================================================
BODY
========================================================= */

body {

margin: 0;

font-family: var(--font-primary);
color: var(--text-primary);

background:
    var(--bg-overlay),
    var(--bg-main);

min-height: 100vh;

display: flex;
flex-direction: column;

transition:
    background var(--transition-medium),
    color var(--transition-medium);

}

/* =========================================================
ATMOSPHERIC OVERLAY
========================================================= */

body::before {

content: "";

position: fixed;
inset: 0;

pointer-events: none;

background:
    repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(255,255,255,0.02) 3px
    );

z-index: var(--z-overlay);

}

/* =========================================================
GLOBAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}

a {
color: inherit;
text-decoration: none;
}

::selection {
background: var(--theme-primary);
color: white;
}

:focus-visible {
outline: 2px solid var(--theme-primary);
outline-offset: 2px;
}

/* =========================================================
GLOBAL APP SHELL
========================================================= */

.app-shell {

width: 100%;
min-height: 100vh;

display: flex;
flex-direction: column;

}

/* =========================================================
GLOBAL UTILITIES
========================================================= */

.text-muted {
color: var(--text-secondary);
}

.text-center {
text-align: center;
}

.glow-text {
text-shadow:
0 0 8px var(--theme-glow),
0 0 18px var(--theme-glow);
}


@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;

    }

}