/**
 * Game Foundry - Base Stylesheet
 * 
 * Design tokens, reset, layout utilities, typography, and accessibility.
 * 
 * @author Game Foundry
 * @version 2.0.0
 */


/* =============================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       1.1 Colors — RGB format for alpha composability
       The "forge" palette: deep blacks, warm golds, and hot metal accents
       ------------------------------------------------------------------------- */

    /** Deep black like coal */
    --color-black: rgb(3, 3, 3);
    --color-black-fade: rgba(3, 3, 3, 0.9);

    /** Anthracite - very dark gray */
    --color-anthracite: rgb(24, 24, 24);

    /** Warm off-white like heated metal glow */
    --color-white: rgb(250, 245, 245);
    --color-white-fade: rgba(250, 245, 245, 0.45);

    /** Gold accent - polished */
    --color-gold: rgb(255, 170, 0);
    --color-gold-fade: rgba(255, 170, 0, 0.45);

    /** Darker gold - for button backgrounds and depth */
    --color-gold-dark: rgb(180, 120, 0);

    /** Light blue - "cold steel" blue-gray for accents */
    --color-blue: rgb(173, 186, 196);

    /** Red - "hot metal" red-orange for interactive elements */
    /*--color-red: rgb(192, 66, 16);*/

    /** Smoke - muted gray for disabled/secondary states */
    --color-smoke: rgba(123, 123, 123, 0.45);

    /** Green - for success states, confirmations */
    --color-green: rgb(13, 233, 79);
    --color-green-dark: rgb(10, 82, 29);

    /** Red - for errors, warnings */
    --color-red: rgb(241, 16, 35);
    --color-red-dark: rgb(87, 6, 13);
    
    /* -------------------------------------------------------------------------
       Section Background Gradients
       Adjustable gradients for alternating section backgrounds.
       Modify endpoints and direction to customize.
       ------------------------------------------------------------------------- */

    /** Coal gradient - dark section backgrounds */
    --gradient-coal-start: var(--color-anthracite);
    --gradient-coal-end: var(--color-black);
    --gradient-coal-angle: 90deg;
    --gradient-coal: linear-gradient(
        var(--gradient-coal-angle),
        var(--gradient-coal-start),
        var(--gradient-coal-end)
    );

    /** Gold gradient - light section backgrounds */
    --gradient-gold-start: var(--color-gold);
    --gradient-gold-end: var(--color-gold-dark);
    --gradient-gold-angle: 90deg;
    --gradient-gold: linear-gradient(
        var(--gradient-gold-angle),
        var(--gradient-gold-start),
        var(--gradient-gold-end)
    );

    /** Fade gradient - dark to transparent for overlays */
    --gradient-fade-start: rgba(3, 3, 3, 0.5);
    --gradient-fade-mid: rgba(3, 3, 3, 0.1);
    --gradient-fade-end: rgba(3, 3, 3, 0);
    --gradient-fade-angle: 180deg;
    --gradient-fade: linear-gradient(
        var(--gradient-fade-angle),
        var(--gradient-fade-start) 0%,
        var(--gradient-fade-mid) 60%,
        var(--gradient-fade-end) 100%
    );

    /* -------------------------------------------------------------------------
       1.2 Typography
       Two fonts only: Serif for display, Sans for everything else
       Font sizes using a modular scale (base: 1rem = 16px)
       ------------------------------------------------------------------------- */
    
    /** Font families - THE ONLY TWO FONTS PERMITTED */
    --font-serif: "Cormorant Garamond", "Times New Roman", serif;
    --font-sans: "Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    
    /** Extra small - badges, coming soon labels */
    --text-xs: 0.7rem;      /* 11.2px */
    
    /** Small - buttons, labels, footer text */
    --text-sm: 0.8rem;      /* 12.8px */
    
    /** Base - body text, paragraphs */
    --text-base: 1rem;      /* 16px */

    /** Body text weights */
    --font-weight-body-bold: 700;

    /** Line heights — two tiers */
    --leading-tight: 1.4;     /* Default body text */
    --leading-loose: 1.6;     /* Descriptive text, callouts */
    
    /** Large - h4-h6, minor headings */
    --text-lg: 1.5rem;    /* 24px */
    
    /** Extra large - h3, subsection headings */
    --text-xl: 2rem;     /* 32px */
    
    /** 2X large - h2, section headings */
    --text-2xl: clamp(2.25rem, 5vw, 3.75rem);       /* 36px → 60px */

    /** 3X large - h1, page titles */
    --text-3xl: clamp(4rem, 8vw, 6rem);       /* 64px → 96px */

    /* -------------------------------------------------------------------------
       1.3 Spacing
       Consistent spacing scale for margins and padding
       ------------------------------------------------------------------------- */
    
    /** Header height - for offsetting content below fixed header */
    --header-height: 120px;
    
    /** Extra small - tight spacing between related items */
    --space-xs: 6px;
    
    /** Small - standard component internal spacing */
    --space-sm: 12px;
    
    /** Medium - section padding, card spacing */
    --space-md: 24px;
    
    /** Large - major section gaps */
    --space-lg: 40px;
    
    /** Extra large - hero/page top padding */
    --space-xl: 72px;

    /* -------------------------------------------------------------------------
       1.4 Layout
       Container widths, border radii, and structural values
       ------------------------------------------------------------------------- */
    
    /** Maximum content width - optimal reading line length */
    --container-max: 1440px;

    /** Legal page content width - narrower for readability */
    --content-max: 800px;

    /** Content width tiers - constrain text blocks for readability */
    --content-narrow: 500px;
    --content-sub: 600px;
    --content-mid: 640px;
    --content-wide: 720px;

    /** Sidebar/column widths */
    --sidebar-width: 300px;
    --column-max: 320px;

    /** Button sizing */
    --btn-icon-size: 3.48rem;

    /** Pill-shaped buttons and badges */
    --radius-full: 999px;

    /** Subtle rounding for cards/boxes */
    --radius-sm: 4px;

    /* -------------------------------------------------------------------------
       1.5 Effects & Animation
       Transition timings and animation curves
       ------------------------------------------------------------------------- */
    
    /** Fast - hover states, color changes */
    --transition-fast: 0.1s ease;
    
    /** Base - most interactive transitions */
    --transition-base: 0.2s ease;
    
    /** Slow - slide-in panels, major state changes */
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /** Page fade-in duration */
    --animation-fade-in: 1s ease-out;
    
    /** Drop shadow - consistent depth effect */
    --shadow-drop: 0 4px 20px rgba(0, 0, 0, 0.5);
}


/* =============================================================================
   2. RESET & BASE STYLES
   ============================================================================= */

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

/** Consecutive paragraphs get tighter spacing than first/standalone paragraphs */
p + p {
    margin-top: var(--space-md);
}

/** Global paragraph bottom margin */
p {
    margin-bottom: var(--space-md);
}

/** Remove bottom margin when another paragraph follows */
p:has(+ p) {
    margin-bottom: 0;
}

/** Global list indentation */
ul {
    padding-left: var(--space-md);
    margin: var(--space-sm) 0 var(--space-md);
}

html, body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/**
 * GLOBAL TYPOGRAPHY DEFAULT
 * Sans (Work Sans) is the default for the entire document.
 * All elements inherit Sans unless explicitly overridden.
 * Serif is ONLY applied via explicit CSS rules tied to semantic roles.
 */
body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}

a,
button,
input,
textarea,
select,
[role="button"],
.btn-icon {
    cursor: url("/assets/hammer.cur"), pointer;
    -webkit-tap-highlight-color: transparent;
}


/* =============================================================================
   3. LAYOUT UTILITIES
   ============================================================================= */

/**
 * Page wrapper - flex container for sticky footer pattern
 * Includes page fade-in animation on load
 */
.page-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: fade-in var(--animation-fade-in) forwards;
}

/**
 * Container - centered content with max-width
 * Used for all major page sections
 */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/**
 * Narrow width constraint for better readability
 * Use for long-form content like legal pages, blog posts, etc.
 */
.narrow {
    max-width: var(--content-max);
}


/* =============================================================================
   4. TYPOGRAPHY
   
   TYPOGRAPHY SYSTEM RULES:
   - Serif (Cormorant Garamond): Display/editorial text only
   - Sans (Work Sans): Body, interface, numerals — everything else
   - Italics: Only for quotations or titles of works in body text
   - Uppercase: Only for .eyebrow
   ============================================================================= */

/* -----------------------------------------------------------------------------
   4.1 Links
   ----------------------------------------------------------------------------- */

a {
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-gold);
}

/* -----------------------------------------------------------------------------
   4.2 Display Text — SERIF
   High-impact, short text: headings, titles, editorial
   Max ~60-70 chars, ~2 lines. Never for paragraphs or dense text.
   ----------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.title,
.editorial,
.manifesto,
.pull-quote {
    font-family: var(--font-serif);
    font-weight: 900;
}

/* Heading sizes - responsive via clamp() */
h1 { font-size: var(--text-3xl); }  /* 48-96px (clamp) */
h2 { font-size: var(--text-2xl); }  /* 28-48px (clamp) */
h3 { font-size: var(--text-xl); }   /* 28px */
h4, h5, h6 { font-size: var(--text-lg); }  /* 18px - minor headings */

/* Heading margins - vertical rhythm */
h1, h2, h3 { margin: var(--space-lg) 0 var(--space-md) 0; }  /* 40px top, 24px bottom */
h4, h5, h6 { margin: var(--space-sm) 0 var(--space-sm) 0; }  /* 12px top, 12px bottom */

/* Remove top margin when heading is first child */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   4.3 Body/Interface Text — SANS (inherited from body)
   All reading, scanning, and interaction text.
   These selectors ensure Sans is explicit for key elements.
   ----------------------------------------------------------------------------- */

p, span, li,
nav, menu, header, footer,
button, input, textarea, select, label,
.body,
.description,
.meta,
.tag,
.status {
    font-family: var(--font-sans);
}

/* -----------------------------------------------------------------------------
   4.4 Eyebrow — SANS, UPPERCASE
   The ONLY elements permitted to use uppercase.
   ----------------------------------------------------------------------------- */

.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: block;
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* Heading/eyebrow color by background context */
h1, h2, h3, h4, h5, h6,
.eyebrow {
    color: var(--color-gold);
}

.bg-gold h1, .bg-gold h2, .bg-gold h3,
.bg-gold h4, .bg-gold h5, .bg-gold h6,
.bg-gold .eyebrow {
    color: var(--color-black);
}

/* =============================================================================
   5. BACKGROUND UTILITIES
   ============================================================================= */

.bg-coal { 
    background: var(--gradient-coal);
    /* Override isn't needed for text since body text is white by default */
}
.bg-gold { 
    background: var(--gradient-gold);
    color: var(--color-black);
}


/* =============================================================================
   6. ACCESSIBILITY
   ============================================================================= */

/**
 * Visually hidden - hides content visually but keeps it accessible
 * to screen readers. Used for SEO-friendly headings.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * Focus states - visible focus rings for keyboard navigation
 * Uses :focus-visible to only show for keyboard users
 */
a:focus-visible,
button:focus-visible,
.btn-icon:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 4px solid var(--color-white);
    outline-offset: 4px;
}


/* =============================================================================
   7. STATE UTILITIES
   ============================================================================= */

/* "Coming soon" badge for unreleased features */
.coming-soon {
    font-size: var(--text-xs);
    margin-left: var(--space-xs);
    text-transform: uppercase;
    color: var(--color-smoke);
}

/* Disabled link appearance */
.disabled-link {
    color: var(--color-smoke);
    cursor: default;
}


/* =============================================================================
   8. ANIMATIONS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   8.1 Page Transitions
   ----------------------------------------------------------------------------- */

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


/* -----------------------------------------------------------------------------
   8.2 Button Animations
   "Shake" effect on hover - simulates a forge hammer strike
   ----------------------------------------------------------------------------- */

@keyframes btn-shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-5px); }
    50%  { transform: translateX(5px); }
    75%  { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}


/* -----------------------------------------------------------------------------
   8.3 Spark Particles
   Hot steel spark effect created via JavaScript (sparks.js)
   ----------------------------------------------------------------------------- */

.spark-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    animation: spark-fly forwards;
}

@keyframes spark-fly {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--translate-x), var(--translate-y)) rotate(var(--rotation)) scale(0);
        opacity: 0;
    }
}


/* =============================================================================
   9. ACCESSIBILITY - REDUCED MOTION
   Users who prefer reduced motion get minimal animation durations and no scroll behavior.
   ============================================================================= */

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