/**
 * CSS Variables - Hanasemasuka Design System
 * Authentic NES/SNES/PS1 Retro Aesthetic
 */

:root {
    /* ============================================
       COLOR PALETTE - Classic 16-bit inspired
       Limited palette like real hardware
       ============================================ */
    
    /* Background layers - SNES RPG deep blues */
    --bg-darkest: #080810;
    --bg-dark: #101028;
    --bg-medium: #182048;
    --bg-light: #203060;
    --bg-lighter: #284080;
    --bg-surface: #182848;
    
    /* Panel colors - FF6/Chrono Trigger window style */
    --panel-bg: #101830;
    --panel-bg-gradient: linear-gradient(180deg, #182848 0%, #101828 100%);
    --panel-bg-solid: #142038;
    --panel-border-outer: #000008;
    --panel-border-inner: #4860a0;
    --panel-border-highlight: #98b0e8;
    --panel-border-shadow: #081020;
    
    /* Classic JRPG window chrome colors */
    --window-outer: #000000;
    --window-frame: #4868a8;
    --window-highlight: #a8c8f8;
    --window-shadow: #182848;
    --window-fill: #102040
    
    /* Accent colors - 16-bit palette constraints */
    --accent-primary: #e83850;      /* HP red - classic RPG */
    --accent-primary-dark: #a82038;
    --accent-primary-light: #f86878;
    --accent-primary-glow: #e83850;
    
    --accent-secondary: #f8b800;    /* Gold/coins - SNES yellow */
    --accent-secondary-dark: #c89800;
    --accent-secondary-light: #f8d858;
    --accent-secondary-glow: #f8b800;
    
    --accent-success: #40c868;      /* Cure/heal green */
    --accent-success-dark: #289048;
    --accent-success-light: #68e890;
    --accent-success-glow: #40c868;
    
    --accent-info: #00c8f8;         /* MP blue - classic cyan */
    --accent-info-dark: #0098c8;
    --accent-info-light: #58e0f8;
    --accent-info-glow: #00c8f8;
    
    --accent-error: #f82838;        /* Damage red */
    --accent-error-glow: #f82838;
    
    /* Additional retro colors */
    --accent-mp: #8080f8;           /* Magic points purple */
    --accent-exp: #f8f858;          /* Experience yellow */
    --accent-rare: #f080f8;         /* Rare item pink */
    
    /* Text colors - crisp retro whites */
    --text-primary: #f8f8f8;
    --text-secondary: #a8a8b8;
    --text-muted: #686878;
    --text-japanese: #ffffff;
    --text-highlight: #f8f858;      /* Classic SNES highlight yellow */
    --text-accent: #98c8f8;
    --text-disabled: #484858;
    
    /* Pixel border colors */
    --border-dark: #080810;
    --border-medium: #2d2d44;
    --border-light: #7b68ee;
    --border-highlight: #b8c0ff;
    
    /* Status colors */
    --hp-bar: #4ecca3;
    --mp-bar: #7b68ee;
    --xp-bar: #e94560;
    --coin-color: #ffd700;
    
    /* Mastery levels */
    --mastery-0: #4a4a5a;   /* New */
    --mastery-1: #6a6a8a;   /* Learning */
    --mastery-2: #7b68ee;   /* Familiar */
    --mastery-3: #4ecca3;   /* Proficient */
    --mastery-4: #ffd700;   /* Expert */
    --mastery-5: #ff6b88;   /* Mastered */

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    --font-pixel: 'PixelFont', 'Press Start 2P', monospace;
    --font-ui: 'PixelUI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-japanese: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', sans-serif;
    
    --font-size-xs: 0.625rem;    /* 10px */
    --font-size-sm: 0.75rem;     /* 12px */
    --font-size-md: 0.875rem;    /* 14px */
    --font-size-lg: 1rem;        /* 16px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 2rem;       /* 32px */
    --font-size-4xl: 3rem;       /* 48px */
    
    /* Japanese text sizes (larger for readability) */
    --font-size-jp-sm: 1.25rem;  /* 20px */
    --font-size-jp-md: 1.75rem;  /* 28px */
    --font-size-jp-lg: 2.5rem;   /* 40px */
    --font-size-jp-xl: 4rem;     /* 64px */

    /* ============================================
       SPACING
       ============================================ */
    
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ============================================
       PIXEL DIMENSIONS - Chunky retro sizes
       ============================================ */
    
    --pixel: 4px;           /* Base pixel size */
    --pixel-2x: 8px;        /* Double pixel */
    --border-width: 4px;    /* Standard border */
    --border-thick: 8px;    /* Thick decorative border */
    
    /* Panel dimensions */
    --panel-padding: var(--space-lg);
    --panel-radius: 0;      /* Sharp corners - no rounded edges! */
    
    /* Card dimensions */
    --card-width: 320px;
    --card-height: 200px;
    
    /* CRT/Scanline effect */
    --scanline-opacity: 0.08;
    --crt-curvature: 2px;

    /* ============================================
       SHADOWS & EFFECTS - Hard pixel shadows only
       No soft shadows - keep it crisp!
       ============================================ */
    
    --shadow-pixel: 
        4px 4px 0 #000000;
    
    --shadow-panel: 
        4px 4px 0 #000000,
        8px 8px 0 rgba(0, 0, 0, 0.5);
    
    --shadow-panel-elevated:
        4px 4px 0 #000000,
        8px 8px 0 #000000;
    
    --shadow-button:
        4px 4px 0 #000000;
    
    --shadow-button-hover:
        4px 4px 0 #000000;
    
    --shadow-button-pressed:
        2px 2px 0 #000000;
    
    /* No soft glows - use solid color blocks instead */
    --glow-accent: 0 0 0 2px var(--accent-primary);
    --glow-success: 0 0 0 2px var(--accent-success);
    --glow-gold: 0 0 0 2px var(--accent-secondary);
    --glow-info: 0 0 0 2px var(--accent-info);
    
    /* Dithering pattern for pseudo-transparency */
    --dither-25: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23000' fill-opacity='0.5'/%3E%3C/svg%3E");
    --dither-50: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23000'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000'/%3E%3C/svg%3E");
    --dither-75: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='%23000'/%3E%3Crect x='0' y='0' width='2' height='2' fill='%23000' fill-opacity='0'/%3E%3C/svg%3E");

    /* ============================================
       TRANSITIONS - Snappy retro feel
       Quick, no easing - like old hardware
       ============================================ */
    
    --transition-fast: 50ms steps(2);
    --transition-normal: 100ms steps(3);
    --transition-slow: 200ms steps(4);
    --transition-instant: 0ms;
    /* Smooth option for card flips */
    --transition-smooth: 300ms ease-out;

    /* ============================================
       Z-INDEX LAYERS
       ============================================ */
    
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-notification: 500;
    --z-tooltip: 600;
}

/* ============================================
   THEME VARIANTS - Applied via body class
   ============================================ */

/* Sakura Theme */
body.theme-sakura {
    --bg-darkest: #1a0a14;
    --bg-dark: #2d1a24;
    --bg-medium: #3d2434;
    --bg-light: #4d3444;
    --panel-border-inner: #8a5a7a;
    --panel-border-highlight: #da9aba;
    --accent-primary: #ff7eb3;
    --border-light: #da7aa0;
}

/* Midnight Theme */
body.theme-midnight {
    --bg-darkest: #050510;
    --bg-dark: #0a0a1a;
    --bg-medium: #101025;
    --bg-light: #1a1a35;
    --panel-border-inner: #3a3a6a;
    --panel-border-highlight: #5a5aaa;
    --accent-primary: #8080ff;
    --accent-info: #a0a0ff;
}

/* Forest Theme */
body.theme-forest {
    --bg-darkest: #0a140a;
    --bg-dark: #142414;
    --bg-medium: #1e341e;
    --bg-light: #284428;
    --panel-border-inner: #4a7a4a;
    --panel-border-highlight: #7aba7a;
    --accent-primary: #50c878;
    --accent-success: #90ee90;
}

/* Ocean Theme */
body.theme-ocean {
    --bg-darkest: #0a1418;
    --bg-dark: #0f2030;
    --bg-medium: #152838;
    --bg-light: #1a3545;
    --panel-border-inner: #4a7a8a;
    --panel-border-highlight: #7ac0d0;
    --accent-primary: #00bcd4;
    --accent-info: #40e0d0;
}

/* Golden Theme (unlockable) */
body.theme-golden {
    --bg-darkest: #14100a;
    --bg-dark: #241c14;
    --bg-medium: #34281e;
    --bg-light: #443828;
    --panel-border-inner: #8a7a4a;
    --panel-border-highlight: #dac07a;
    --accent-primary: #ffd700;
    --accent-secondary: #ffb347;
    --coin-color: #fff0a0;
}