/*!
 * Design Tokens - CSS Custom Properties
 * Version: 1.0
 * 
 * This file contains all design tokens as CSS custom properties
 * that can be used throughout the site for consistent styling.
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=New+Rocker&family=Press+Start+2P&family=Black+Ops+One&family=Oxanium&display=swap');

:root {
    /* Primary Brand Colors */
    --hms-pink: #ff69b4;
    --hms-pink-light: rgba(255, 105, 180, 0.1);
    --hms-pink-medium: rgba(255, 105, 180, 0.8);
    
    /* Original/Legacy Pink-Purple (from original additional CSS) */
    --hms-pink-purple: #d870b8;
    --hms-pink-purple-light: rgba(216, 112, 184, 0.1);
    --hms-pink-purple-medium: rgba(216, 112, 184, 0.8);
    --hms-pink-purple-strong: rgba(216, 112, 184, 0.9);
    
    /* Secondary Brand Colors */
    --hms-blue: #87ceeb;
    --hms-blue-light: rgba(135, 206, 250, 0.3);
    --hms-blue-medium: rgba(135, 206, 250, 0.7);
    --hms-blue-strong: rgba(135, 206, 250, 0.9);
    --hms-blue-full: rgba(135, 206, 250, 1);
    
    /* Text Colors */
    --hms-text-white: #ffffff;
    --hms-text-black: #000000;
    
    /* Background Colors */
    --hms-bg-black: #000000;
    --hms-bg-black-light: rgba(0, 0, 0, 0.05);
    --hms-bg-black-medium: rgba(0, 0, 0, 0.1);
    --hms-bg-black-strong: rgba(0, 0, 0, 0.4);
    --hms-bg-black-full: rgba(0, 0, 0, 0.9);
    
    /* Font Variables */
    --hms-font-display: "New Rocker", cursive;
    --hms-font-heading: "Black Ops One", cursive;
    --hms-font-body: "Oxanium", sans-serif;
    --hms-font-ui: "Press Start 2P", monospace;
    
    /* Font Sizes */
    --hms-text-xs: 0.75rem;      /* 12px - small labels */
    --hms-text-sm: 0.875rem;     /* 14px - small text */
    --hms-text-base: 1rem;       /* 16px - body text */
    --hms-text-lg: 1.125rem;     /* 18px - large body */
    --hms-text-xl: 1.25rem;      /* 20px - small headings */
    --hms-text-2xl: 1.5rem;      /* 24px - medium headings */
    --hms-text-3xl: 1.875rem;    /* 30px - large headings */
    --hms-text-4xl: 2.25rem;     /* 36px - extra large headings */
    --hms-text-5xl: 3rem;        /* 48px - hero text */
    
    /* Responsive Sizes */
    --hms-text-responsive: calc(35vh / 15); /* Card text scaling */
    
    /* H-Size Mappings */
    --hms-h1: var(--hms-text-5xl);  /* Hero titles */
    --hms-h2: var(--hms-text-4xl);  /* Section titles */
    --hms-h3: var(--hms-text-3xl);  /* Subsection titles */
    --hms-h4: var(--hms-text-2xl);  /* Card titles */
    --hms-h5: var(--hms-text-xl);   /* Small headings */
    --hms-h6: var(--hms-text-lg);   /* Smallest headings */
    
    
    /* ========================================
       SPECIAL EFFECTS - SHADOW SYSTEMS
       ======================================== */
    
    /* ========================================
       STYLE 1: VIBRANT PINK (Current/New Style)
       ======================================== */
    
    /* 5-Layer Shadow System - Vibrant Pink */
    --hms-shadow-outline-pink: 1px 1px 0 var(--hms-pink), -1px -1px 0 var(--hms-pink);
    --hms-shadow-glow-pink: 0 0 6px var(--hms-pink), 0 0 14px rgba(255, 105, 180, 0.3);
    --hms-shadow-full-pink: var(--hms-shadow-outline-pink), var(--hms-shadow-glow-pink);
    
    /* Vibrant Pink Presets */
    --hms-shadow-performance-pink: 0 0 4px var(--hms-pink);
    --hms-shadow-looks-pink: var(--hms-shadow-full-pink);
    
    /* ========================================
       STYLE 2: ORIGINAL PINK-PURPLE (Legacy Style)
       ======================================== */
    
    /* 5-Layer Shadow System - Original Pink-Purple */
    --hms-shadow-outline-purple: 1px 1px 0 var(--hms-pink-purple), -1px -1px 0 var(--hms-pink-purple);
    --hms-shadow-glow-purple: 0 0 6px var(--hms-pink-purple), 0 0 14px rgba(216, 112, 184, 0.3);
    --hms-shadow-full-purple: var(--hms-shadow-outline-purple), var(--hms-shadow-glow-purple);
    
    /* Original Pink-Purple Presets */
    --hms-shadow-performance-purple: 0 0 4px var(--hms-pink-purple);
    --hms-shadow-looks-purple: var(--hms-shadow-full-purple);
    
    /* ========================================
       DEFAULT STYLE ASSIGNMENTS
       ======================================== */
    
    /* Default uses Original Pink-Purple style (Style 2) */
    --hms-shadow-performance: var(--hms-shadow-performance-purple);
    --hms-shadow-looks: var(--hms-shadow-looks-purple);
    
    /* 3D Transform Effects (for future use) */
    --hms-transform-small: perspective(500px) translateZ(1px);
    --hms-transform-medium: perspective(500px) translateZ(3px);
    --hms-transform-large: perspective(500px) translateZ(5px);
    
    /* Combined Effects Presets */
    --hms-effect-performance: var(--hms-shadow-performance);
    --hms-effect-looks: var(--hms-shadow-looks);
    --hms-effect-3d-small: var(--hms-shadow-looks), var(--hms-transform-small);
    --hms-effect-3d-medium: var(--hms-shadow-looks), var(--hms-transform-medium);
    --hms-effect-3d-large: var(--hms-shadow-looks), var(--hms-transform-large);
    
    
    /* H-Size Shadow Assignments (using default style) */
    --hms-h1-shadow: var(--hms-shadow-looks);
    --hms-h2-shadow: var(--hms-shadow-looks);
    --hms-h3-shadow: var(--hms-shadow-looks);
    --hms-h4-shadow: var(--hms-shadow-looks);
    --hms-h5-shadow: var(--hms-shadow-performance); /* Smaller headings use performance preset */
    --hms-h6-shadow: var(--hms-shadow-performance); /* Smaller headings use performance preset */
    
    /* Legacy Aliases (for backward compatibility) */
    --hms-primary: var(--hms-pink);
    --hms-secondary: var(--hms-blue);
    --hms-text: var(--hms-text-white);
    --hms-background: var(--hms-bg-black);
    --hms-card-bg: var(--hms-pink-light);
    --hms-border: var(--hms-pink);
    --hms-font-primary: var(--hms-font-body);
}

/* Global H-Size Styles for Site-Wide Use */
h1, h2, h3, h4, h5, h6 {
    color: var(--hms-text-white);
    text-align: center;
    font-weight: 700;
    margin: var(--hms-heading-margin);
    padding: var(--hms-heading-padding);
}

h1 {
    font-family: var(--hms-font-display);
    font-size: var(--hms-h1);
    color: var(--hms-text-white);
    text-shadow: 4px 2px 0 var(--hms-text-black);
    -webkit-text-stroke: 1px var(--hms-text-black);
    letter-spacing: 0.8px;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
}



h2 {
    font-family: var(--hms-font-display);
    font-size: var(--hms-h2); /* Desktop: 2.25rem (36px) */
    text-shadow: var(--hms-h2-shadow);
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* Mobile H2 Responsive Scaling */
@media (max-width: 768px) {
    h2 {
        font-size: clamp(1.5rem, 4.5vw, 1.75rem);
        /* Mobile: Scales from 18px (small phones) to 28px (tablets) */
        /* Based on viewport width with min/max limits */
    }
}

h3 {
    font-family: var(--hms-font-heading);
    font-size: var(--hms-h3);
    text-shadow: var(--hms-h3-shadow);
    letter-spacing: 0.8px;
    line-height: 1.3;
}

h4 {
    font-family: var(--hms-font-heading);
    font-size: var(--hms-h4);
    text-shadow: var(--hms-h4-shadow);
    letter-spacing: 0.6px;
    line-height: 1.4;
    font-weight: 600;
}

h5 {
    font-family: var(--hms-font-body);
    font-size: var(--hms-h5);
    text-shadow: var(--hms-h5-shadow);
    letter-spacing: 0.5px;
    line-height: 1.4;
}

h6 {
    font-family: var(--hms-font-body);
    font-size: var(--hms-h6);
    text-shadow: var(--hms-h6-shadow);
    letter-spacing: 0.5px;
    line-height: 1.5;
    font-weight: 600;
}

/* Dark mode variations (if needed in future) */
/* @media (prefers-color-scheme: dark) {
    :root {
        Dark mode can override colors here if needed
    }
} */