/* ===================================
   MSE Brand Standards Starter Template
   
   INSTRUCTIONS:
   1. Copy this file to every new project
   2. Rename to match your project (e.g., page-name.css)
   3. Add your custom styles AFTER the brand standards
   4. NEVER change the brand standards section
   ================================== */

/* MSE BRAND STANDARDS - DO NOT MODIFY */
:root {
    /* MSE Brand Color Palette - MANDATORY */
    --mse-primary: #160402;         /* Black light fade - Main Background */
    --mse-secondary: #d5d8dc;       /* Light grey - H1,H3,H4, body text */
    --mse-accent: #c0392b;          /* Faded Burgundy - H2, buttons, accents */
    --mse-accent-hover: #ec7063;    /* Salmon red - hover states, links, errors */
    --mse-white-fade: #fbfcfc;      /* White gradient - button text, highlights */
    
    /* MSE Typography System - MANDATORY */
    --font-headings: 'Bebas Neue', sans-serif;        /* H1, H2 titles */
    --font-subheadings: 'Raleway', sans-serif;        /* H3, H4, H5, navigation */
    --font-body: 'Roboto Slab', serif;                /* Body text, paragraphs */
    
    /* MSE Animation Standards - MANDATORY */
    --mse-transition: all 0.3s ease;
    --mse-transition-fast: all 0.2s ease;
    --mse-transition-slow: all 0.5s ease;
    
    /* MSE Typography Scales - MANDATORY */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem;  /* 36px */
    --text-5xl: 3rem;     /* 48px */
    --text-6xl: 3.75rem;  /* 60px */
    
    /* MSE Spacing System - MANDATORY */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
}

/* MSE Font Face Declarations - MANDATORY */
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Roboto Slab will fallback to system serif if needed */
@font-face {
    font-family: 'Roboto Slab';
    src: local('Georgia'), local('Times New Roman');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: local('Georgia'), local('Times New Roman');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: local('Georgia'), local('Times New Roman');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* MSE Base Styles - MANDATORY */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--mse-secondary);
    background: linear-gradient(135deg, var(--mse-primary) 0%, rgba(22, 4, 2, 0.8) 100%);
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* MSE Typography Hierarchy - MANDATORY */
h1, h2 {
    font-family: var(--font-headings);
    font-weight: normal;
    color: var(--mse-secondary);
    line-height: 1.1;
}

h3, h4, h5, h6 {
    font-family: var(--font-subheadings);
    font-weight: 600;
    color: var(--mse-secondary);
    line-height: 1.3;
}

h1 { font-size: var(--text-6xl); }
h2 { 
    font-size: var(--text-5xl); 
    color: var(--mse-accent);
}
h3 { font-size: var(--text-4xl); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl); }

p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--mse-secondary);
    line-height: 1.6;
}

/* MSE Button Standards - MANDATORY */
.mse-button,
button {
    font-family: var(--font-subheadings);
    font-weight: 600;
    background: var(--mse-accent);
    color: var(--mse-white-fade);
    border: 2px solid var(--mse-accent);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    cursor: pointer;
    transition: var(--mse-transition);
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

.mse-button:hover,
button:hover {
    background: var(--mse-accent-hover);
    border-color: var(--mse-accent-hover);
    transform: translateY(-2px);
}

/* MSE Container Standards - MANDATORY */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

/* MSE Responsive Standards - MANDATORY */
@media (max-width: 768px) {
    :root {
        --text-6xl: 2.5rem;     /* Scaled down for mobile */
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
    }
    
    .container {
        padding: 0 var(--space-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   CUSTOM PROJECT STYLES
   Add your project-specific styles below this line
   REMEMBER: Use MSE variables, never hardcode values
   ================================== */

/* Your custom styles go here */