/*
 * ТОКЕНЫ ОФОРМЛЕНИЯ. Единственное место, где живут цвета, шрифты, отступы, радиусы, тени и основные размеры.
 * site.css берёт все цвета и шрифты только из var(--...) (тест SiteThemeIT запрещает цвета-литералы в site.css);
 * мелкие геометрические значения (rem/px в сетках и media-запросах, позиции звёзд) допустимы прямо в site.css.
 * Исключение: цвет значков (#c19a66) зашит в SVG-файлах static/img, потому что <img> не видит CSS-переменные.
 * Сменили --color-accent - поправьте stroke в static/img/*.svg.
 * Название сайта - в messages.properties, ключ site.name.
 */
:root {
    color-scheme: dark;

    /* Поверхности: почти чёрный, синевато-угольный */
    --color-bg: #090c11;
    --color-bg-deep: #05070a;
    --color-surface: #11151c;
    --color-surface-2: #0d1117;
    --color-surface-3: #171c25;
    --color-overlay: rgba(5, 7, 10, 0.72);
    --color-transparent: rgba(0, 0, 0, 0);

    /* Текст (контраст с --color-surface не ниже 4.5:1; приглушённый проверен отдельно) */
    --color-text: #e6dfd2;
    --color-text-muted: #a2a9b5;
    --color-text-on-accent: #150f07;
    --color-text-stone: #f1ece0;
    --color-text-stone-shade: #8d897f;

    /* Акцент: приглушённая бронза и тёплый беж */
    --color-accent: #c19a66;
    --color-accent-strong: #ddb880;
    --color-accent-dim: #6e5839;
    --color-accent-deep: #4a3b27;
    --color-link: #d6b07a;
    --color-link-hover: #9bd4ff;

    /* «Технологический» синий акцент из кристаллов логотипа; применять умеренно: фокус, hover ссылок, бейджи, свечение логотипа */
    --color-tech: #52b6ff;
    --color-tech-strong: #9bd4ff;
    --color-tech-dim: #1f5f99;
    --color-tech-bg: #0f2236;
    --glow-tech: rgba(82, 182, 255, 0.4);

    /* Рамки */
    --color-border: #2a3240;
    --color-border-strong: #3b4556;
    --color-ornament: #7a6244;

    /* Состояния */
    --color-danger: #ee8a80;
    --color-danger-bg: #2a1616;
    --color-danger-border: #6b2f2b;
    --color-success: #8fcf9f;
    --color-success-bg: #132119;
    --color-success-border: #2f5a3c;
    --color-focus: #9bd4ff;

    /* Кнопки */
    --color-btn-bg: #c19a66;
    --color-btn-bg-hover: #d4ae7a;
    --color-btn-ghost-border: #6e5839;
    --color-btn-ghost-hover: #1c222c;
    --color-btn-disabled-text: #8a919d;

    /* Ночное небо шапки и сцена */
    --sky-top: #04060a;
    --sky-mid: #0a1322;
    --sky-bottom: #182238;
    --star: #c8d4ea;
    --moon: #dfe9f7;
    --moon-shade: #aebfd8;
    --moon-glow: rgba(150, 185, 235, 0.45);
    --hill: #070a10;
    /*
     * Слот под будущий арт шапки. По умолчанию none: рисуется CSS-сцена.
     * Чтобы подключить картинку: положите static/img/hero.webp и задайте --hero-image: url("../img/hero.webp");
     * картинка ложится поверх сцены и закрывает её целиком.
     */
    --hero-image: none;
    --logo-width: clamp(15rem, 44vw, 25rem);
    --hero-castle: url("../img/hero-castle.svg");
    --hero-player: url("../img/hero-player.svg");

    /* Цвета профессий (подсветка сцены в карточках) */
    --prof-miner: #4aa0c8;
    --prof-hunter: #5e8f6a;
    --prof-smith: #e0823a;
    --prof-medic: #6fbf8a;
    --prof-builder: #d79a55;
    --prof-engineer: #d2564c;

    /* Шрифты: только свои файлы из static/fonts, запасные - системные */
    --font-display: "Cormorant", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    /* Размеры шрифта */
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-hero: clamp(2.75rem, 9vw, 5.25rem);
    --fs-card-title: clamp(1.5rem, 3.2vw, 1.875rem);
    --lh-text: 1.6;
    --lh-tight: 1.15;
    --ls-caps: 0.16em;

    /* Отступы */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* Радиусы */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-round: 50%;
    --radius-pill: 999px;

    /* Тени */
    --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-medal: 0 0 0 3px var(--color-surface-2), 0 0 0 4px var(--color-accent-dim), 0 6px 14px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px var(--moon-glow);
    --shadow-btn: 0 2px 0 var(--color-accent-dim), 0 6px 14px rgba(0, 0, 0, 0.4);
    --shadow-logo: drop-shadow(0 0 22px var(--glow-tech)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
    --shadow-text-title: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.7);

    /* Размеры и сетка */
    --width-page: 76rem;
    --width-narrow: 34rem;
    --width-cabinet: 52rem;
    --hero-height: clamp(21rem, 42vw, 26rem);
    --hero-height-compact: 9.5rem;
    --medal-size: clamp(3.5rem, 8vw, 4.75rem);
    --scene-size: clamp(8.5rem, 26vw, 11rem);
    --avatar-size: 3rem;
    --width-post-author: 11.5rem;
    --ornament-size: 0.875rem;
    --ornament-inset: 0.4rem;
    --ornament-weight: 2px;
    --border-width: 1px;
    --tap-size: 2.75rem;
    --focus-width: 3px;
    --focus-offset: 2px;

    /* Анимация */
    --dur-fast: 120ms;
    --dur-slow: 6s;
}