/*
Theme Name: Premium JS Sandbox Theme
Theme URI: https://github.com/expert-wp/premium-js-sandbox
Author: Senior WordPress Architect
Description: Высокопроизводительная тема-песочница для безопасного и быстрого запуска Vanilla JS инструментов на основе импорта JSON-конфигураций. Оптимизирована под Core Web Vitals и SEO.
Version: 1.0.0
License: GNU GPLv2 or later
Text Domain: js-sandbox
*/

/* 1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (ПРЕМИАЛЬНАЯ СВЕТЛАЯ ПАЛИТРА И ТИПОГРАФИКА) */
:root {
    --bg-primary: #F8F9FA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F3F5;
    
    --text-primary: #1A1D20;
    --text-secondary: #495057;
    --text-muted: #868E96;
    
    --accent-primary: #0066CC;
    --accent-hover: #0052A3;
    --accent-light: #E6F0FA;
    
    --success: #2B8A3E;
    --success-light: #EBFBEE;
    --danger: #C92A2A;
    --danger-light: #FFE3E3;
    --warning: #E67E22;
    --warning-light: #FDEDEC;
    
    --border-color: #E9ECEF;
    --border-focus: #A5D8FF;
    
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. СБРОС СТИЛЕЙ (CSS RESET) */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* 3. БАЗОВАЯ СТРУКТУРНАЯ СЕТКА */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex-grow: 1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Скрытые элементы для доступности (Screen Readers) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}