/* ================================================
   HENDOSHI - CSS VARIABLES & CUSTOM PROPERTIES
   ================================================
   
   This file contains all CSS custom properties used throughout the site.
   Variables are organized by category for easy maintenance.
   
   Load Order: FIRST (before any other CSS)
   ================================================ */

/* ===================================
   DARK MODE (Default)
   =================================== */
:root {
    /* Brand Colors */
    --neon-pink: #ff1493;
    --electric-yellow: #ccff00;

    /* Base Colors */
    --black: #000000;
    --white: #ffffff;
    --charcoal: #1a1a1a;
    --off-white: #f5f5f5;
    --gray: #666666;

    /* Text Colors */
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-primary: var(--white);

    /* Glassmorphism */
    --bg-glass-light: rgba(255, 255, 255, 0.03);
    --border-glass-color: rgba(255, 255, 255, 0.08);
    --border-glass: 1px solid var(--border-glass-color);
    --border-radius-glass: 10px;
    --padding-glass: 1rem 1.25rem;
}

/* ===================================
   LIGHT MODE
   =================================== */
:root.light-mode {
    /* Inverted Base Colors */
    --black: #ffffff;
    --white: #000000;
    --charcoal: #f5f5f5;
    --off-white: #1a1a1a;

    /* Adjusted Brand Colors for Light Mode */
    --neon-pink: #e71f7f;
    --electric-yellow: #b8d400;

    /* Gray unchanged */
    --gray: #666666;

    /* Text Colors */
    --text-muted: rgba(0, 0, 0, 0.6);
    --text-primary: var(--black);

    /* Glassmorphism - Light Mode */
    --bg-glass-light: rgba(0, 0, 0, 0.03);
    --border-glass-color: rgba(0, 0, 0, 0.08);
    --border-glass: 1px solid var(--border-glass-color);
    --border-radius-glass: 10px;
    --padding-glass: 1rem 1.25rem;
}