/* BASE STYLES - Core variables, resets, and foundational styles */

/* ==========================================
	Import Rules
========================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap');


/* ==========================================
   Custom Font Variables
========================================== */
@font-face {
    font-family: 'SymbolFont';
    src: url('../fonts/Aurebesh.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NormieFont'; 
    src: url('../fonts/Starjedi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
========================================== */
:root {
    /* Color Palette */
    --color-blood-red: #990000;
    --color-red-red: #ff0000;
    --color-dark-bg: #0d0d12;
    --color-light-bg: #8c8c8c;
    --color-terminal-green: #6EE7B7;
    --color-dark-terminal-green: #2e614d;
    --color-green: #017037;
    --color-yellow: yellow;
    
    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-display: 'Monoton', cursive; 
	--font-symbol: 'SymbolFont', cursive;
	--font-normie: 'NormieFont', cursive;
	
    
    /* Dynamic Mask Position (Updated by JS) */
    --mask-x: -100px;
    --mask-y: -100px;
}

/* ==========================================
   GLOBAL RESETS & BASE STYLES
========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: transparent;
    cursor: none; /* Custom cursor effect */
    min-height: 100vh;
    font-family: var(--font-primary);
    color: #e5e7eb; /* text-gray-200 */
    line-height: 1.6;
}


/* ==========================================
   TYPOGRAPHY HELPERS
========================================== */
.page-title {
    font-family: var(--font-normie); 
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 900;
    /* text-transform: uppercase; */
    color: white;
    text-shadow: 4px 4px 0px var(--color-blood-red);
    /* letter-spacing: -0.02em; */
	letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.page-subtitle {
	font-family: var(--font-symbol);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #6b7280; /* text-gray-500 */
    font-weight: 500;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-blood-red);
    border-bottom: 4px solid #4b5563; /* border-gray-600 */
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.subsection-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #d1d5db; /* text-gray-300 */
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.125rem;
    color: #9ca3af; /* text-gray-400 */
    margin-bottom: 1.5rem;
}

.sidebar-title {
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-blood-red);
    border-bottom: 2px solid #4b5563;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
}

.sidebar-description {
    color: #d1d5db;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-blood-red);
    margin-bottom: 1rem;
}

/* ==========================================
   CUSTOM SCROLLBAR
========================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-dark-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-blood-red);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-terminal-green);
}