/* Core Tokens & Reset */

/* 197-10.1Н: cascade @layer order — синхронно с slide_common.css iframe-side.
   Без этой декларации в shell (editor.html/index.html/view.html) `@layer components`
   rules (media_picker.css + др.) попадают в anonymous layer с LOW priority,
   ломая native <dialog> centering (margin: auto перебивается UA-default reset). */
@layer reset, tokens, foundation, components, slides, overrides;

:root {
    /* Colors — 206-2Н Figma sync */
    --bg-color: #0A0019;                  /* Figma Dark Background 1 */
    --text-main: #ffffff;                 /* Figma Absolut White */
    --text-secondary: #B4C8FF;            /* Figma Gray Light */
    --accent-primary: #F000F0;            /* Figma Pink — единственный canonical accent для magenta-related UI */
    --accent-secondary: #008CFF;          /* Figma Blue Light */
    --accent-gradient: linear-gradient(270deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    --accent-gradient-static: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    --surface-bg: linear-gradient(145deg, rgba(30, 20, 50, 0.4), rgba(var(--surface-dark-rgb), 0.6));
    --surface-border: 1px solid rgba(255, 255, 255, 0.1);
    --surface-blur: var(--blur-md);
    --surface-radius: 24px;

    /* Typography */
    --font-head: 'Play', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* Dynamic Scaling (Set by JS) */
    --d-card: var(--dynamic-card-scale, 1);
    --d-font: var(--dynamic-font-scale, 1);

    /* 152-12Н: --marker-size token для .point-marker (override per-type через CSS var) */
    --marker-size: 80px;

    /* Fluid Font Sizes */
    --fs-h1: clamp(1.5rem, 4vw, 3.5rem);
    --fs-h2: clamp(0.8rem, 1.5vw, 1.2rem);
    --fs-h3: calc(clamp(0.8rem, 1.2vw, 1rem) * var(--d-font));
    --fs-body: calc(clamp(0.7rem, 1vw, 0.9rem) * var(--d-font));

    /* Responsive Sizes */
    --target-size: min(500px, 50vmin);
    /* Rings have equal width */
    --card-width: calc(clamp(220px, 28vw, 380px) * var(--d-card));
    --header-top: clamp(20px, 4vh, 50px);
    --header-left: clamp(20px, 4vw, 60px);

    /* Blobs — 208-1Н: оба через accent-primary (rgba derivative) */
    --blob-color-1: rgba(var(--accent-primary-rgb), 0.15);
    --blob-color-2: rgba(0, 100, 200, 0.15);   /* Figma Blue Dark #0064C8 */

    /* ─── RGB Channels (для rgba-композиции) ─── */
    --bg-color-rgb: 10, 0, 25;
    --text-main-rgb: 255, 255, 255;
    --text-secondary-rgb: 180, 200, 255;
    --accent-primary-rgb: 240, 0, 240;
    --accent-secondary-rgb: 0, 140, 255;
    --surface-dark-rgb: 10, 5, 20;
    --black-rgb: 0, 0, 0;
    --color-white: #ffffff;
    --color-dark: #1E1E28;              /* 206-2Н: Figma Black */

    /* ─── Semantic Colors (success / error для состояний викторины, валидации) ─── */
    --semantic-success: #00DC64;        /* 206-2Н: Figma Green Light — WCAG AA на dark */
    --semantic-success-rgb: 0, 220, 100;
    --semantic-error: #C8283C;          /* 206-2Н: Figma Red Dark */
    --semantic-error-rgb: 200, 40, 60;

    /* ─── Spacing Scale (8pt grid; умножать на --d-card при использовании) ─── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-ms: 12px;      /* 4pt sub-step: gap внутри карточек, portrait-режим */
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;     /* 8×8 — было 60, нормализовано на 8pt grid */

    /* ─── Adaptive Composition (R09 + 152-3Н) ─── */
    --header-height: 80px;        /* высота .slide-header при наличии контента (для --safe-zone-top) */
    --footer-height: 60px;        /* высота .slide-footer при наличии контента (для --safe-zone-bottom) */

    /* ─── Modular Type Scale (152-4Н, ratio 1.25 Major Third) ─── */
}

/* 152-12Н: @property для типизированных custom properties — анимируемые --d-card / --d-font.
   Без @property browsers ¬анимируют CSS variables (treated as <unknown>). */
@property --d-card {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
@property --d-font {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

:root {
    --type-ratio: 1.25;
    --fs-step-0:  0.875rem;                                          /* base */
    --fs-step--1: calc(var(--fs-step-0) / var(--type-ratio));        /* 0.7rem */
    --fs-step--2: calc(var(--fs-step--1) / var(--type-ratio));       /* 0.56rem */
    --fs-step-1:  calc(var(--fs-step-0) * var(--type-ratio));        /* 1.094rem */
    --fs-step-2:  calc(var(--fs-step-1) * var(--type-ratio));        /* 1.367rem */
    --fs-step-3:  calc(var(--fs-step-2) * var(--type-ratio));        /* 1.708rem */
    --fs-step-4:  calc(var(--fs-step-3) * var(--type-ratio));        /* 2.135rem */

    /* ─── A11y baselines (152-4Н) ─── */
    --text-min-opacity: 0.65;     /* минимум для читаемости текста на glass (WCAG AA) */
    --glass-min-opacity: 0.75;    /* минимум backdrop-color при reduced-transparency fallback */
    --surface-solid: oklch(12% 0.02 240);  /* solid-fill для prefers-reduced-transparency */

    /* 206-4Н: OKLCH parallel palette (152-13Н: --accent-base/-secondary-base/-soft/-hover/-muted)
       удалена ∵ 0 production usages. История — git log series 152-13Н. */

    /* macOS window-control namespace — 206-2Н: Figma Red/Yellow/Green hex */
    --window-control-close: #F03C50;   /* 206-2Н: Figma Red (был oklch(68% 0.20 25)) */
    --window-control-min:   #F0B400;   /* 206-2Н: Figma Yellow (был oklch(82% 0.16 85)) */
    --window-control-max:   #00B450;   /* 206-2Н: Figma Green (был oklch(75% 0.20 145)) */

    /* ─── Timing Scale ─── */
    --timing-instant: 0.15s;
    --timing-fast: 0.2s;
    --timing-normal: 0.3s;
    --timing-moderate: 0.4s;
    --timing-slow: 0.5s;
    --timing-entrance: 0.6s;
    --timing-slow-entrance: 0.7s; /* между entrance(0.6) и dramatic(0.8) */
    --timing-dramatic: 0.8s;

    /* ─── Easing ─── */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index Scale ─── */
    --z-base: 1;
    --z-content: 5;
    --z-above: 10;
    --z-header: 50;
    --z-pagination: 60;
    --z-controls: 100;
    --z-menu: 900;
    --z-burger: 1000;
    --z-modal: 9999;
    --z-top: 10000;

    /* ─── Border Radius Scale ─── */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 20px;
    /* --surface-radius: 24px — уже существует */

    /* ─── Blur Scale ─── */
    --blur-sm: blur(8px);
    --blur-md: blur(20px);
    --blur-lg: blur(30px);
    --blur-bg: blur(100px);

    /* ─── Modular Type Scale (ratio ≈ 1.25 — Major Third) ─── */
    --type-ratio: 1.25;
    --fs-step--1: 0.7rem;   /* body small */
    --fs-step-0: 0.9rem;    /* body */
    --fs-step-1: 1.1rem;    /* h3 / point title */
    --fs-step-2: 1.4rem;    /* h2 / subheader */
    --fs-step-3: 1.75rem;   /* h1 base */
    /* fs-h1/h2/h3/body уже ∃ в tokens — fs-step-* = справочная шкала для новых слайдов */

    /* ─── Hover / Active States ─── */
    --hover-glow: drop-shadow(0 0 8px rgba(var(--text-main-rgb), 0.8));
    --hover-stroke: 3;          /* stroke-width при наведении (SVG) */
    --stroke-default: 1.5;      /* stroke-width по умолчанию (SVG) */

    /* ─── Touch Target ─── */
    --touch-min: 48px;           /* мин. размер интерактивного элемента (WCAG 2.5.8) */

    /* ─── Design Constraints (дизайн-принципы) ─── */
    --glass-min-opacity: 0.6;    /* мин. непрозрачность подложки для читаемости на glass */
    --figure-max-fill: 0.65;     /* макс. доля высоты для центральной фигуры */
    --min-card-scale: 0.5;       /* порог деградации --d-card (ниже → убрать элемент) */
    --min-font-scale: 0.85;      /* 145-26Н: повышено с 0.65 чтобы body text оставался читаемым ∧ визуально заполнял 3 строки description. Ниже 0.85 — 9px font выглядит crushed. */

    /* ─── Semantic Spacing (Primitive → Semantic) ─── */
    --spacing-inner: var(--space-sm);    /* padding внутри карточки */
    --spacing-outer: var(--space-md);    /* gap между карточками */
    --spacing-section: var(--space-lg);  /* отступ между секциями */

    /* ─── Menu (из variables.css) ─── */
    --menu-width: 320px;

    /* ─── Editor Panel Resize Constraints (194-1Н + 194-5Н) ─── */
    /* `--menu-width` остаётся global для iframe-side consumers (core/menu/css/*).
       UX research May 2026: 240px = comfortable минимум для slide-nav thumbnails;
       50vw = guard от self-destruction (одна панель ¬более половины экрана).
       Шаг 16px = 2×8pt grid (Arrow keys); шаг 64px = 8×8pt grid (Shift+Arrow). */
    --panel-min-width: 240px;
    --panel-max-width: 50vw;
    --panel-step: 16px;
    --panel-step-large: 64px;
    /* ─── 194-5Н: Cross-shell default panel widths (global scope, ¬editor-only) ─── */
    /* Корень bug 194-5Н: `--editor-panel-{nav,menu}-width` определялся только в
       `:root` editor.css → undefined на home/view shells (¬импортируют editor.css)
       → invalid var() без fallback → width: auto → SideMenu растягивается на весь viewport.
       Перенос в глобальный scope (tokens.css) + default `clamp(240px, 16.67vw, 50vw)`:
       - 16.67vw = 1/6 viewport (UX request 194-5Н)
       - Min 240px = readability floor (sym `--panel-min-width`)
       - Max 50vw = self-destruction guard (sym `--panel-max-width`)
       PanelWidthsPersist._applyOnLoad inline `:root style` setProperty переопределяет
       clamp() default при наличии localStorage backup (specificity inline > tokens.css). */
    --editor-panel-nav-width: clamp(240px, 16.67vw, 50vw);
    --editor-panel-menu-width: clamp(240px, 16.67vw, 50vw);
    --menu-btn-size: 36px;      /* кнопки в хедере меню (close, gallery, nav) */
    --titlebar-btn-size: 28px;  /* компактные иконки в sticky AppBar (190-Н) */
    --titlebar-icon-size: 18px; /* Material Symbols в title bar */
    --titlebar-glass-opacity: 0.7; /* непрозрачность glass-подложки sticky AppBar */

    /* ─── Unified Surface Tokens (190-10Н, design system 3-tier canon).
       Source of truth = home_styles.css card pattern (canonical visual language).
       Apply: home cards, panels, side-menu-header, slide-nav-item, editor-toolbar.
       Tier 2 semantic (referencing Primitive RGB/alpha). Изменить здесь → меняется ВСЁ.
    */
    /* Card tier — default elevation (стоит на bg-color) */
    --surface-card-bg: linear-gradient(145deg, rgba(30, 20, 50, 0.45), rgba(10, 5, 20, 0.55));
    --surface-card-bg-hover: linear-gradient(145deg, rgba(40, 25, 65, 0.6), rgba(15, 8, 30, 0.7));
    /* Raised tier — overlays поверх card (sticky topbar, title bar capsules) */
    --surface-raised-bg: linear-gradient(145deg, rgba(30, 20, 50, 0.85), rgba(var(--surface-dark-rgb), 0.92));
    /* Border (default + accent для hover/focus) */
    --surface-border-color: rgba(var(--text-main-rgb), 0.08);
    --surface-border-accent: rgba(var(--accent-secondary-rgb), 0.7);
    /* Card-radius для card/raised tier (legacy `--surface-radius: 24px` остался для других контекстов).
       16px — canonical card radius из home_styles, ¬перезаписывать legacy 24. */
    --surface-card-radius: 16px;
    /* Shadow — base elevation + raised + hover-glow combo */
    --surface-shadow: 0 4px 24px rgba(var(--black-rgb), 0.25);
    --surface-shadow-raised: 0 12px 32px -8px rgba(var(--black-rgb), 0.6), 0 2px 8px rgba(var(--black-rgb), 0.3);
    --surface-shadow-hover: 0 12px 32px rgba(var(--black-rgb), 0.35), 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.45);
    /* 206-4Н: --surface-glow-focus удалён (0 usages, callers использовали rgba(--accent-secondary-rgb, 0.15) напрямую) */

    /* Menu density tokens (190-Н Dense panel, R07 single source of truth).
       Точка тюнинга вертикальной плотности правого меню. Уменьшить → плотнее. */
    --menu-label-size: var(--fs-step--1);    /* 0.7rem, шрифт лейблов секций (uppercase microcategory) */
    --menu-label-gap: var(--space-sm);       /* 8px, label → control */
    --menu-section-gap: var(--space-lg);     /* 24px, между секциями ∧ title bar → первая секция */

    /* ─── Auto-Fit Constraints ─── */
    --autofit-min-lines: 3;          /* мин. строк body на пункт; CSS --clamp-desc гарантирует отображение */
    --autofit-marker-mobile: 45px;   /* высота маркера в мобильной раскладке */

    /* ─── Inline Editing Constraints (183-7Н) ─── */
    --editable-max-lines: 5;         /* max строк для contenteditable в edit-mode; больше → overflow-y: auto scroll */

    /* ─── Layout Constants (для JS layout engines) ─── */
    --layout-marker-size: 80px;
    --layout-safe-edge: 40px;
    --layout-safe-edge-gear: 30px;
    --layout-gap-target: 12px;
    --layout-gap-gear: 22px;
    --layout-gear-outer-gap: 110px;
    --layout-min-text-area: 200px;
    --layout-header-left-padding: 45px;
    --layout-card-side-padding: 20px;

    /* ─── Breakpoints (для JS isMobile) ─── */
    --bp-mobile: 600px;
    --bp-tablet: 800px;

    /* ─── SVG Timing ─── */
    --timing-svg-fade: 220ms;
}

/* 197-10.3Н: universal reset wrapped в @layer reset (cascade order declared выше).
   Без layer'а это unlayered rule перебивает ВСЕ @layer components rules — MediaPicker
   dialog терял margin: auto centering + padding на dropzone collapsed (squashed UI). */
@layer reset {
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Background Blobs */
body::before,
body::after {
    content: '';
    position: fixed;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: var(--blur-bg);
    z-index: -1;
    animation: float 25s infinite alternate ease-in-out;
}

body::before {
    background: var(--blob-color-1);
    top: -20%;
    left: -10%;
}

body::after {
    background: var(--blob-color-2);
    bottom: -20%;
    right: -10%;
    animation-delay: -10s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(5%, 5%) scale(1.1);
    }
}

/* Layout Transition */
.slide-enter {
    animation: fadeIn var(--timing-dramatic) ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}