/*
 * @file: Source\themes\blocksy-child\assets\css\photocka-variables.css
 * @version: 1.0.7
 * @updated: 2026-03-30 23:54:59
 * @size: 38049
 */
/* ==========================================================================
   ФОТОЧКА — СИСТЕМА ДИЗАЙН-ПЕРЕМЕННЫХ
   Версия: 1.1 (prefixed tokens: --phc-*)
   Основано на: ПРАВИЛА ФОТОЧКИ v1.3, ПРАВИЛА ПОСТРОЕНИЯ СТРАНИЦ v1.4+
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ЦВЕТОВАЯ ПАЛИТРА
   -------------------------------------------------------------------------- */


:root {
  /* === ОСНОВНЫЕ БРЕНДОВЫЕ ЦВЕТА === */

  /* Желтый — якорь памяти (ProjectCharter п.9) */
  --phc-brand-yellow-primary: #FFC107;  /* Теплый янтарный — основной */
  --phc-brand-yellow-light:   #FFD54F;  /* Золотой свет — для градиентов */
  --phc-brand-yellow-dark:    #FF8F00;  /* Насыщенный — для акцентов */
  --phc-brand-yellow-pale:    #FFF8E1;  /* Очень светлый — фоны */

  /* Синий — доверие и контраст */ 	
  --phc-brand-blue-primary: #1565C0;    /* Теплый синий — темные блоки */
  --phc-brand-blue-medium: #1976D2;     /* Синий светлее — акценты */
  --phc-brand-blue-light:  #64B5F6;     /* Голубой — вторичные элементы */
  --phc-brand-blue-pale:   #E3F2FD;     /* Очень светлый — фоны */

  /* Оранжевый — дружеский акцент */
  --phc-brand-orange:       #FF6D00;    /* Для CTA и важных элементов */
  --phc-brand-orange-light: #FF8A65;    /* Светлый оранжевый */

  /* Зеленый — успех, подтверждение */
  --phc-brand-green:       #43A047;     /* Для положительных действий */
  --phc-brand-green-light: #81C784;     /* Светлый зеленый */

  /* Красный — предупреждение, ошибка */
  --phc-brand-red:       #E53935;       /* Для ошибок и предупреждений */
  --phc-brand-red-light: #EF9A9A;       /* Светлый красный */


  /* === ФОНОВЫЕ ЦВЕТА === */

  /* Светлые фоны (чередование блоков) */
  --phc-bg-white:      #FFFFFF;         /* Чистый белый */
  --phc-bg-cream:      #FFF8E1;         /* Кремовый — основной светлый */
  --phc-bg-cream-dark: #FFF3CD;         /* Кремовый темнее */
  --phc-bg-gray-light: #F5F5F5;         /* Светло-серый — альтернатива (НЕ роль секции) */
  --phc-bg-blue-pale:  #E3F2FD;         /* Бледно-голубой */

  /* Темные фоны (чередование блоков) */
  --phc-bg-blue-dark:   #1565C0;        /* Синий для блоков */
  --phc-bg-blue-darker: #0D47A1;        /* Темно-синий — глубокий */
  --phc-bg-graphite:    #263238;        /* Графит — альтернатива синему */
  --phc-bg-charcoal:    #37474F;        /* Угольный */

  /* Регламентные блоки */
  --phc-bg-info:    #FFF6D8;            /* Важная информация */
  --phc-bg-warning: #FFE0B2;            /* Предупреждения (общий фон) */
  --phc-bg-success: #E8F5E9;            /* Успешные сообщения */
  --phc-bg-error:   #FFEBEE;            /* Ошибки */


  /* === ЦВЕТА ТЕКСТА === */

  /* Основной текст */
  --phc-text-primary:   #212121;        /* Почти черный — основной текст */
  --phc-text-secondary: #424242;        /* Темно-серый — вторичный */
  --phc-text-muted:     #757575;        /* Серый — пояснения */
  --phc-text-light:     #9E9E9E;        /* Светло-серый — неактивный */

  /* Текст на цветных фонах */
  --phc-text-on-yellow: #212121;        /* На желтом — темный */
  --phc-text-on-blue:   #FFFFFF;        /* На синем — белый */
  --phc-text-on-dark:   #FFFFFF;        /* На темном — белый */
  --phc-text-on-cream:  #212121;        /* На кремовом — темный */

  /* Ссылки */
  --phc-link-color:   #1565C0;          /* Синий — ссылки */
  --phc-link-hover:   #0D47A1;          /* Темно-синий — ховер */
  --phc-link-visited: #7E57C2;          /* Фиолетовый — посещенные */


  /* === ГРАНИЦЫ И РАЗДЕЛИТЕЛИ === */

  --phc-border-light:  #E0E0E0;         /* Светлые границы */
  --phc-border-medium: #BDBDBD;         /* Средние границы */
  --phc-border-dark:   #424242;         /* Темные границы */
  --phc-border-blue:   #1565C0;         /* Синие границы (акцент) */
  --phc-border-yellow: #FFC107;         /* Желтые границы (акцент) */


  /* === Brand icon gradient === */
  --phc-brand-icon-gradient: linear-gradient(
    135deg,
    var(--phc-brand-yellow-light),
    var(--phc-brand-yellow-primary) 40%,
    var(--phc-brand-orange)
  );
  
/* --------------------------------------------------------------------------
   LIGHT GRAY THEME (Security Action)
   Нейтральная светлая тема на базе graphite
   -------------------------------------------------------------------------- */

--phc-bg-soft-gray: #edeeef;

/* карточки внутри секции */
--phc-bg-soft-gray-card: #ffffff;

/* hover поверхностей */
--phc-bg-soft-gray-hover: #e4e6e8;

/* границы */
--phc-border-soft-gray: rgba(38, 44, 52, 0.10);
--phc-border-soft-gray-strong: rgba(38, 44, 52, 0.18);

/* мягкие тени как у graphite но светлые */

--phc-shadow-soft-gray:
  0 2px 6px rgba(0,0,0,0.06),
  0 8px 18px rgba(0,0,0,0.08);

--phc-shadow-soft-gray-hover:
  0 4px 10px rgba(0,0,0,0.08),
  0 12px 26px rgba(0,0,0,0.12);  
  
  
}


/* --------------------------------------------------------------------------
   2. ВЕРТИКАЛЬНЫЙ РИТМ
   -------------------------------------------------------------------------- */

:root {
  /* Базовая единица: 8px */
  --phc-space-1: 8px;
  --phc-space-2: 16px;
  --phc-space-3: 24px;
  --phc-space-4: 32px;
  --phc-space-5: 48px;
  --phc-space-6: 64px;
  --phc-space-7: 72px;                      /* Основной между секциями (десктоп) */
  --phc-space-8: 96px;
  --phc-space-9: 128px;

  /* Мобильные отступы */
  --phc-space-mobile-section: 48px;         /* Максимум для мобильных */
  --phc-space-desktop-section: 72px;        /* Для десктопа */

  /* Специфические отступы */
  --phc-space-heading-subheading: 16px;     /* Заголовок → подзаголовок */
  --phc-space-text-button: 24px;            /* Текст → кнопки */
  --phc-space-card-service: 24px;           /* Карточки → служебный текст */
  --phc-space-group-internal: 24px;         /* Внутри логических групп */
}


/* --------------------------------------------------------------------------
   3. ТИПОГРАФИКА
   -------------------------------------------------------------------------- */

:root {
  /* Размеры шрифтов */
  --phc-font-size-xs: 12px;
  --phc-font-size-sm: 14px;
  --phc-font-size-base: 16px;
  --phc-font-size-lg: 18px;
  --phc-font-size-xl: 20px;
  --phc-font-size-2xl: 24px;
  --phc-font-size-3xl: 32px;
  --phc-font-size-4xl: 40px;
  --phc-font-size-5xl: 48px;

  /* Межстрочные интервалы */
  --phc-line-height-tight: 1.2;
  --phc-line-height-base: 1.5;
  --phc-line-height-relaxed: 1.75;

  /* Жирность */
  --phc-font-weight-light: 300;
  --phc-font-weight-normal: 400;
  --phc-font-weight-medium: 500;
  --phc-font-weight-semibold: 600;
  --phc-font-weight-bold: 700;

  /* Семейства шрифтов */
  --phc-font-family-base: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --phc-font-family-heading: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --phc-font-family-mono: 'Fira Code', 'Consolas', monospace;
}


/* --------------------------------------------------------------------------
   4. ТЕНИ И ГЛУБИНА
   -------------------------------------------------------------------------- */

:root {
  /* Базовые тени (для карточек) */
  --phc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --phc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --phc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --phc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* Цветные тени */
  --phc-shadow-yellow: 0 4px 12px rgba(255, 193, 7, 0.3);
  --phc-shadow-blue:   0 4px 12px rgba(21, 101, 192, 0.3);
  --phc-shadow-orange: 0 4px 12px rgba(255, 109, 0, 0.3);

  /* Внутренние тени */
  --phc-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Свечение (для активных элементов) */
  --phc-glow-yellow: 0 0 20px rgba(255, 193, 7, 0.5);
  --phc-glow-blue:   0 0 20px rgba(21, 101, 192, 0.5);
}


/* --------------------------------------------------------------------------
   5. РАДИУСЫ СКРУГЛЕНИЯ
   -------------------------------------------------------------------------- */

:root {
  --phc-radius-none: 0;
  --phc-radius-sm: 4px;
  --phc-radius-md: 8px;
  --phc-radius-lg: 12px;
  --phc-radius-xl: 16px;
  --phc-radius-2xl: 24px;
  --phc-radius-full: 9999px;

  /* Специфические радиусы */
  --phc-radius-card: 12px;
  --phc-radius-button: 10px;
  --phc-radius-input: 8px;
  --phc-radius-badge: 9999px;
}


/* --------------------------------------------------------------------------
   6. CTA И КНОПКИ
   -------------------------------------------------------------------------- */

:root {
  /* Основные кнопки */
  --phc-btn-primary-bg: var(--phc-brand-yellow-primary);
  --phc-btn-primary-text: var(--phc-text-on-yellow);
  --phc-btn-primary-hover: #FFB300;
  --phc-btn-primary-border: var(--phc-brand-yellow-light);
  --phc-btn-secondary-border: transparent;

  --phc-btn-secondary-bg: var(--phc-brand-blue-primary);
  --phc-btn-secondary-text: var(--phc-text-on-blue);
  --phc-btn-secondary-hover: var(--phc-bg-blue-darker);

  --phc-btn-outline-bg: transparent;
  --phc-btn-outline-border: var(--phc-brand-blue-primary);
  --phc-btn-outline-text: var(--phc-brand-blue-primary);
  --phc-btn-outline-hover-bg: var(--phc-bg-blue-pale);

  /* Размеры кнопок */
  --phc-btn-height-sm: 36px;
  --phc-btn-height-md: 44px;
  --phc-btn-height-lg: 52px;

  /* Отступы кнопок */
  --phc-btn-padding-x: 24px;
  --phc-btn-padding-y: 12px;
}


:root{

  /* Нули/единицы/проценты — чтобы в стилях не было чисел */
  --phc-num-0: 0;
  --phc-num-1: 1;
  --phc-percent-100: 100%;

  /* Слои */
  --phc-z-dropdown: 30;

  /* Размеры меню */
  --phc-action-menu-min-width: 16rem;

  /* Отступ от кнопки до меню */
  --phc-action-menu-offset-y: var(--phc-space-2);

  /* Визуал */
  --phc-action-btn-bg: var(--phc-btn-primary-bg);
  --phc-action-btn-text: var(--phc-btn-primary-text);
  --phc-action-btn-hover: var(--phc-btn-primary-hover);

  --phc-action-menu-bg: var(--phc-card-bg);
  --phc-action-menu-border: var(--phc-card-border);
  --phc-action-menu-shadow: var(--phc-shadow-lg);
  --phc-action-menu-radius: var(--phc-radius-card);

  --phc-action-item-bg-hover: var(--phc-card-bg-hover);
  --phc-action-item-radius: var(--phc-radius-md);

  --phc-action-focus-ring: var(--phc-border-blue);
}

/* --------------------------------------------------------------------------
   7. КАРТОЧКИ
   -------------------------------------------------------------------------- */

:root {
  /* Карточки услуг */
  --phc-card-bg: var(--phc-bg-white);
  --phc-card-bg-hover: var(--phc-bg-cream);
  --phc-card-border: var(--phc-border-light);
  --phc-card-border-hover: var(--phc-brand-yellow-primary);
  --phc-card-shadow: var(--phc-shadow-md);
  --phc-card-shadow-hover: var(--phc-shadow-lg);

  /* Карточки на темном фоне */
  --phc-card-dark-bg: var(--phc-brand-blue-medium);
  --phc-card-dark-text: var(--phc-text-on-dark);
  --phc-card-dark-border: var(--phc-brand-blue-light);

  /* Внутренние отступы карточек */
  --phc-card-padding: 24px;
  --phc-card-padding-sm: 16px;
  --phc-card-padding-lg: 32px;
}


/* --------------------------------------------------------------------------
   8. HERO-БЛОКИ
   -------------------------------------------------------------------------- */

:root {

  /* =====================================================
     HERO BACKGROUNDS
     ===================================================== */

  /* Hero быстрых услуг */
  --phc-hero-bg-gradient: linear-gradient(
    135deg,
    var(--phc-brand-yellow-light) 0%,
    var(--phc-brand-yellow-primary) 100%
  );

  /* Hero на темном фоне */
  --phc-hero-bg-blue: linear-gradient(
    135deg,
    var(--phc-brand-blue-medium) 0%,
    var(--phc-brand-blue-primary) 100%
  );

  /* Hero сувениров */
  --phc-hero-bg-cream: linear-gradient(
    135deg,
    var(--phc-bg-cream) 0%,
    var(--phc-bg-cream-dark) 100%
  );



  /* =====================================================
     HERO HEIGHT
     ===================================================== */

  --phc-hero-height-min: 400px;
  --phc-hero-height-desktop: 500px;

  /* =====================================================
     HERO VISUAL TUNING
     ===================================================== */

  --phc-hero-brightness: 1.02;
  --phc-hero-saturate: 1.03;
  --phc-hero-glow: var(--phc-shadow-yellow);

  /* =====================================================
     HERO GRID
     ===================================================== */

  --phc-hero-grid-gap: var(--phc-space-5);
  --phc-hero-grid-gap-mobile: var(--phc-space-4);
  --phc-hero-grid-gap-minimal: var(--phc-space-3);

  /* =====================================================
     HERO CONTENT
     ===================================================== */
  --phc-hero-content-max: 38ch;
  --phc-hero-content-max-no-image: 56ch;

  --phc-hero-content-gap: var(--phc-space-3);
  --phc-hero-content-gap-minimal: var(--phc-space-2);



  /* =====================================================
     HERO META (бейджи)
     ===================================================== */

  --phc-hero-meta-gap: var(--phc-space-2);

  --phc-hero-meta-item-padding-y: var(--phc-space-1);
  --phc-hero-meta-item-padding-x: var(--phc-space-2);

  --phc-hero-meta-item-bg: rgba(255,255,255,0.08);
  --phc-hero-meta-item-border: var(--phc-border-on-dark);



  /* =====================================================
     HERO MEDIA
     ===================================================== */

  --phc-hero-media-maxw: 520px;
  --phc-hero-media-maxw-mobile: 320px;

  --phc-hero-media-maxh-mobile: 34svh;

  --phc-hero-media-radius: var(--phc-radius-2xl);
  --phc-hero-media-shadow: var(--phc-shadow-inner);



  /* =====================================================
     HERO PLACEHOLDER
     ===================================================== */

  --phc-hero-image-placeholder-bg: var(--phc-bg-cream-dark);
  --phc-hero-image-placeholder-border: var(--phc-border-light);

}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */

:root {
  /* Аккордеоны FAQ */
  --phc-faq-bg: var(--phc-bg-white);
  --phc-faq-bg-hover: var(--phc-bg-cream);
  --phc-faq-border: var(--phc-border-light);
  --phc-faq-border-active: var(--phc-brand-yellow-primary);

  /* Заголовки FAQ */
  --phc-faq-question-text: var(--phc-text-primary);
  --phc-faq-answer-text: var(--phc-text-secondary);

  /* Иконки раскрытия */
  --phc-faq-icon-color: var(--phc-text-muted);
  --phc-faq-icon-color-active: var(--phc-brand-yellow-primary);
}


/* --------------------------------------------------------------------------
   10. ЦЕНЫ
   -------------------------------------------------------------------------- */

:root {
  /* Карточки цен */
  --phc-price-card-bg: var(--phc-bg-white);
  --phc-price-card-bg-highlight: var(--phc-bg-cream);
  --phc-price-card-border: var(--phc-border-light);
  --phc-price-card-border-highlight: var(--phc-brand-yellow-primary);

  /* Текст цены */
  --phc-price-color: var(--phc-text-primary);
  --phc-price-color-highlight: var(--phc-brand-orange);
  --phc-price-currency: var(--phc-text-muted);

  /* Табличный прайс */
  --phc-price-table-bg: var(--phc-bg-white);
  --phc-price-table-header-bg: var(--phc-bg-cream);
  --phc-price-table-border: var(--phc-border-light);
  --phc-price-table-row-hover: var(--phc-bg-cream-dark);
}


/* --------------------------------------------------------------------------
   11. РЕГЛАМЕНТНЫЕ БЛОКИ
   -------------------------------------------------------------------------- */

:root {
  /* Важная информация */
  --phc-regulatory-bg: var(--phc-bg-info);
  --phc-regulatory-bg-alt: #FFF9E6; /* оставили как конкретику; можно токенизировать позже */
  --phc-regulatory-border: var(--phc-brand-yellow-primary);
  --phc-regulatory-text: var(--phc-text-primary);
  --phc-regulatory-icon: var(--phc-brand-yellow-dark);

  /* Предупреждения */
  --phc-warning-bg: var(--phc-bg-warning);
  --phc-warning-border: #FF9800;
  --phc-warning-text: #E65100;
  --phc-warning-text-strong: #92400E; /* добавлено: формальный регламентный текст */

  /* Успех */
  --phc-success-bg: var(--phc-bg-success);
  --phc-success-border: var(--phc-brand-green);
  --phc-success-text: #1B5E20;

  /* Ошибки */
  --phc-error-bg: var(--phc-bg-error);
  --phc-error-border: var(--phc-brand-red);
  --phc-error-text: #B71C1C;
}


/* --------------------------------------------------------------------------
   12. НАВИГАЦИЯ И МЕНЮ
   -------------------------------------------------------------------------- */

:root {
  /* Хедер */
  --phc-header-bg: var(--phc-bg-white);
  --phc-header-border: var(--phc-border-light);
  --phc-header-text: var(--phc-text-primary);
  --phc-header-text-hover: var(--phc-brand-yellow-primary);

  /* Мобильное меню */
  --phc-mobile-menu-bg: var(--phc-bg-white);
  --phc-mobile-menu-text: var(--phc-text-primary);
  --phc-mobile-menu-hover: var(--phc-bg-cream);
  --phc-mobile-menu-active: var(--phc-brand-yellow-primary);
  --phc-mobile-menu-border: var(--phc-border-light);

  /* Футер */
  --phc-footer-bg: var(--phc-bg-graphite);
  --phc-footer-text: var(--phc-text-on-dark);
  --phc-footer-text-muted: #B0BEC5;
  --phc-footer-link: #90CAF9;
  --phc-footer-link-hover: var(--phc-text-on-dark);
}


/* --------------------------------------------------------------------------
   13. ФОРМЫ И ПОЛЯ ВВОДА
   -------------------------------------------------------------------------- */

:root {
  /* Поля ввода */
  --phc-input-bg: var(--phc-bg-white);
  --phc-input-border: var(--phc-border-medium);
  --phc-input-border-focus: var(--phc-brand-blue-primary);
  --phc-input-border-error: var(--phc-brand-red);
  --phc-input-text: var(--phc-text-primary);
  --phc-input-placeholder: var(--phc-text-light);

  /* Сообщения валидации */
  --phc-input-error-bg: var(--phc-bg-error);
  --phc-input-error-text: var(--phc-error-text);
  --phc-input-success-bg: var(--phc-bg-success);
  --phc-input-success-text: var(--phc-success-text);
}


/* --------------------------------------------------------------------------
   14. АНИМАЦИИ И ПЕРЕХОДЫ
   -------------------------------------------------------------------------- */

:root {
  /* Длительность */
  --phc-transition-fast: 150ms;
  --phc-transition-base: 250ms;
  --phc-transition-slow: 400ms;

  /* Функции времени */
  --phc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --phc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --phc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Стандартный переход */
  --phc-transition-default: all var(--phc-transition-base) var(--phc-ease-in-out);

  /* Hover / micro-interactions */
  --phc-hover-scale: 1.02;
}


/* --------------------------------------------------------------------------
   15. БРЕНДОВЫЕ ЭЛЕМЕНТЫ
   -------------------------------------------------------------------------- */

:root {
  /* Белка — якорь доверия */
  --phc-squirrel-primary: var(--phc-brand-yellow-primary);
  --phc-squirrel-secondary: var(--phc-brand-yellow-dark);
  --phc-squirrel-accent: var(--phc-brand-orange);

  /* Логотип */
  --phc-logo-text: var(--phc-text-primary);
  --phc-logo-accent: var(--phc-brand-yellow-primary);

  /* Фирменный паттерн */
  --phc-pattern-yellow-light: rgba(255, 193, 7, 0.1);
  --phc-pattern-yellow-medium: rgba(255, 193, 7, 0.2);
  --phc-pattern-blue-light: rgba(21, 101, 192, 0.1);
}


/* --------------------------------------------------------------------------
   16. ДОСТУПНОСТЬ (WCAG 2.1)
   -------------------------------------------------------------------------- */

:root {
  --phc-contrast-ratio-min: 4.5;

  --phc-focus-outline: 2px solid var(--phc-brand-blue-primary);
  --phc-focus-outline-offset: 2px;
  --phc-focus-ring: 0 0 0 3px rgba(21, 101, 192, 0.4);

  --phc-prefers-reduced-motion: reduce;
}


/* --------------------------------------------------------------------------
   17. МЕДИА-ЗАПРОСЫ (контрольные точки)
   -------------------------------------------------------------------------- */

:root {
  --phc-breakpoint-sm: 640px;
  --phc-breakpoint-md: 768px;
  --phc-breakpoint-lg: 1024px;
  --phc-breakpoint-xl: 1280px;
  --phc-breakpoint-2xl: 1536px;
}


/* --------------------------------------------------------------------------
   18. АЛИАСЫ ДЛЯ СЕКЦИЙ (нужно для photocka-styles.css)
   -------------------------------------------------------------------------- */

:root {
  --phc-border: var(--phc-border-light);
  --phc-border-on-dark: rgba(255, 255, 255, 0.14);

  /* Surfaces */
  --phc-surface: var(--phc-bg-white);
  --phc-surface-soft: var(--phc-bg-gray-light);
  --phc-border-subtle: var(--phc-border-light);

  /* Icon sizes */
  --phc-icon-md: 24px;

  /* Buttons (shared) */
  --phc-btn-padding-y: 12px;
  --phc-btn-padding-x: 18px;
  --phc-btn-radius: var(--phc-radius-lg);

  /* Action menu */
  --phc-action-menu-minw: 260px;
  --phc-action-icon: 20px;
  --phc-text-on-dark-muted: rgba(255, 255, 255, 0.78);

  --phc-link-on-dark: var(--phc-brand-yellow-light);
  --phc-link-on-dark-hover: var(--phc-brand-yellow-primary);

  --phc-card-bg-on-dark: rgba(255, 255, 255, 0.06);

  --phc-note-bg: var(--phc-regulatory-bg);
  --phc-note-border: var(--phc-regulatory-border);
  --phc-note-text: var(--phc-regulatory-text);

  --phc-note-bg-on-dark: rgba(255, 255, 255, 0.06);
  --phc-note-border-on-dark: rgba(255, 255, 255, 0.14);
  --phc-note-text-on-dark: var(--phc-text-on-dark);

  --phc-btn-on-dark-bg: var(--phc-brand-yellow-primary);
  --phc-btn-on-dark-text: var(--phc-text-on-cream);
  --phc-btn-on-dark-border: var(--phc-brand-yellow-dark);

  --phc-selection-bg: var(--phc-brand-yellow-primary);
  --phc-selection-text: var(--phc-text-on-cream);
}

/* --------------------------------------------------------------------------
   19. CTA SECTION — ПЕРЕМЕННЫЕ НИЖНИХ CTA-КАРТОЧЕК
   -------------------------------------------------------------------------- */

:root {
  /* Сетка CTA-секции */
  --phc-cta-section-grid-gap: var(--phc-space-3);
  --phc-cta-section-grid-gap-mobile: var(--phc-space-2);

  /* Карточка CTA */
  --phc-cta-card-bg: var(--phc-card-bg-on-dark);
  --phc-cta-card-border: var(--phc-border-on-dark);
  --phc-cta-card-shadow: var(--phc-card-shadow);
  --phc-cta-card-shadow-hover: var(--phc-card-shadow-hover);
  --phc-cta-card-radius: var(--phc-radius-card);
  --phc-cta-card-padding: var(--phc-space-4);

  /* Иконка карточки */
  --phc-cta-card-icon-size: 56px;
  --phc-cta-card-icon-svg-size: 24px;
  --phc-cta-card-icon-bg: var(--phc-bg-cream);
  --phc-cta-card-icon-color: var(--phc-brand-blue-primary);
  --phc-cta-card-icon-shadow: var(--phc-shadow-yellow);

  /* Текст карточки */
  --phc-cta-card-title-color: var(--phc-text-on-dark);
  --phc-cta-card-text-color: var(--phc-text-on-dark-muted);

  /* Действия карточки */
  --phc-cta-card-actions-margin-top: var(--phc-space-3);
}

/* --------------------------------------------------------------------------
   20. ICON SYSTEM — ПЕРЕМЕННЫЕ ИКОНОК
   -------------------------------------------------------------------------- */

:root {
  /* Размеры иконок */
  --phc-icon-size-sm: 16px;
  --phc-icon-size-md: 24px;
  --phc-icon-size-lg: 32px;

  /* Алиасы совместимости */
  --phc-icon-sm: var(--phc-icon-size-sm);
  --phc-icon-md: var(--phc-icon-size-md);
  --phc-icon-lg: var(--phc-icon-size-lg);

  /* Толщина и рендер */
  --phc-icon-stroke-width: 1.75;
  --phc-icon-opacity-disabled: 0.56;

  /* Цветовые режимы иконок */
  --phc-icon-color-default: var(--phc-text-primary);
  --phc-icon-color-white: var(--phc-text-on-dark);
  --phc-icon-color-accent: var(--phc-brand-orange);
  --phc-icon-color-service: var(--phc-brand-blue-primary);
  --phc-icon-color-soft-accent: var(--phc-brand-yellow-dark);

  /* Badge: размеры */
  --phc-icon-badge-size-sm: 32px;
  --phc-icon-badge-size-md: 40px;
  --phc-icon-badge-size-lg: 48px;

  /* Badge: отступы и форма */
  --phc-icon-badge-padding: var(--phc-space-1);
  --phc-icon-badge-radius: var(--phc-radius-full);
  --phc-icon-badge-gap: var(--phc-space-1);

  /* Badge: фоны */
  --phc-icon-badge-bg-soft: var(--phc-bg-cream);
  --phc-icon-badge-bg-accent: var(--phc-brand-yellow-primary);
  --phc-icon-badge-bg-service: var(--phc-brand-blue-primary);

  /* Badge: границы */
  --phc-icon-badge-border-soft: var(--phc-border-light);
  --phc-icon-badge-border-accent: var(--phc-brand-yellow-dark);
  --phc-icon-badge-border-service: var(--phc-brand-blue-light);

  /* Badge: тени */
  --phc-icon-badge-shadow-soft: var(--phc-shadow-sm);
  --phc-icon-badge-shadow-accent: var(--phc-shadow-yellow);
  --phc-icon-badge-shadow-service: var(--phc-shadow-blue);

  /* Focus */
  --phc-icon-badge-focus-ring: var(--phc-focus-ring);
  --phc-icon-badge-focus-outline: var(--phc-focus-outline);
  --phc-icon-badge-focus-outline-offset: var(--phc-focus-outline-offset);
}

/* --------------------------------------------------------------------------
   21. HERO / CTA LAYOUT — ДОПОЛНИТЕЛЬНЫЕ ПЕРЕМЕННЫЕ
   -------------------------------------------------------------------------- */

:root {
  /* Контейнер Hero */
  --phc-container-max: var(--phc-breakpoint-xl);
  --phc-container-pad-inline: var(--phc-space-3);
  --phc-container-pad-inline-mobile: var(--phc-space-2);

  /* Типографика Hero */
  --phc-hero-title-size: var(--phc-font-size-5xl);
  --phc-hero-title-size-tablet: var(--phc-font-size-4xl);
  --phc-hero-title-size-mobile: var(--phc-font-size-3xl);
  --phc-hero-subtitle-size: var(--phc-font-size-lg);
  --phc-hero-body-size: var(--phc-font-size-base);
  --phc-hero-title-line-height: var(--phc-line-height-tight);
  --phc-hero-body-line-height: var(--phc-line-height-base);

  /* Ширина контентной колонки */
  --phc-hero-content-max-width: 40rem;
  --phc-hero-content-max-width-no-image: 56rem;

  /* Факты Hero */
  --phc-hero-facts-gap: var(--phc-space-2);
  --phc-hero-fact-gap: var(--phc-space-2);
  --phc-hero-fact-text-size: var(--phc-font-size-sm);

  /* Действия Hero */
  --phc-hero-actions-gap: var(--phc-space-2);
  --phc-hero-action-hint-size: var(--phc-font-size-sm);

  /* Изображение Hero */
  --phc-hero-media-ratio: 4 / 5;
  --phc-hero-image-fit-contain: contain;
  --phc-hero-image-fit-cover: cover;

  /* Текст CTA */
  --phc-cta-card-title-size: var(--phc-font-size-xl);
  --phc-cta-card-text-size: var(--phc-font-size-base);
}

/* =========================================================
   ACTION MENU — NEUTRAL SERVICE PICKER (UI-STD-01)
   ========================================================= */

:root {

  /* Контейнер */
  --phc-action-menu-bg: #ffffff;
  --phc-action-menu-border: rgba(31, 35, 40, 0.08);
  --phc-action-menu-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  --phc-action-menu-radius: 12px;
  --phc-action-menu-padding: 12px;

  /* Пункт */
	--phc-action-item-bg: #f0f2f5;
	--phc-action-item-bg-hover: #e7ebf0;
	--phc-action-item-bg-active: #dde3ea;

  --phc-action-item-text: #111418;
  --phc-action-item-radius: 10px;

  --phc-action-item-padding-y: 12px;
  --phc-action-item-padding-x: 14px;
  --phc-action-item-min-height: 48px;
  --phc-action-item-gap: 10px;

  --phc-action-item-border: rgba(31, 35, 40, 0.06);

  /* Иконки */
  --phc-action-icon-size-box: 20px;
  --phc-action-icon-size: 18px;

  /* Хинт */
  --phc-action-hint-text: #6b7280;
  --phc-action-hint-border: rgba(31, 35, 40, 0.08);

  /* Бренды (ТОЛЬКО АКЦЕНТ) */
  --phc-action-tone-telegram: #229ed9;
  --phc-action-tone-telegram-soft: rgba(34,158,217,0.08);

  --phc-action-tone-max: #6b5cff;
  --phc-action-tone-max-soft: rgba(107,92,255,0.08);

  --phc-action-tone-mail: #6b7280;
  --phc-action-tone-mail-soft: rgba(107,114,128,0.24);

  --phc-action-tone-google: #1a73e8;
  --phc-action-tone-google-soft: rgba(26,115,232,0.08);

  --phc-action-tone-yandex: #ff0000;
  --phc-action-tone-yandex-soft: rgba(255,0,0,0.06);

  --phc-action-tone-2gis: #00a81f;
  --phc-action-tone-2gis-soft: rgba(0,168,31,0.06);
}


/* --------------------------------------------------------------------------
   19. PATTERNS / INTERNAL SECTIONS TOKENS
   Токены для внутренних паттернов:
   phc-feature-list
   phc-spec-panel
   phc-variant-cards
   phc-template-grid
   phc-process-section
   phc-proof-gallery
   phc-price-block
   phc-condition-note
   phc-warning-block
   phc-timing-panel
   phc-faq-section
   phc-table-data
   -------------------------------------------------------------------------- */

:root {
  /* ==========================================================
     19.1 PAGE / SECTION SURFACES
     ========================================================== */

  --phc-page-bg-patterns: #f5f3ef;

  --phc-pattern-surface-white: #ffffff;
  --phc-pattern-surface-cream: #faf8f4;
  --phc-pattern-surface-cream-alt: #f7f3ec;
  --phc-pattern-surface-soft-gray: #f2f4f7;
  --phc-pattern-surface-yellow-soft: #fff7e8;
  --phc-pattern-surface-yellow-soft-2: #fff3dd;
  --phc-pattern-surface-graphite-soft: #23272f;

  /* ==========================================================
     19.2 TEXT
     ========================================================== */

  --phc-pattern-text-primary: var(--phc-text-primary);
  --phc-pattern-text-secondary: var(--phc-text-secondary);
  --phc-pattern-text-muted: #7b8493;

  --phc-pattern-text-on-dark: var(--phc-text-on-dark);
  --phc-pattern-text-on-dark-muted: rgba(246, 247, 249, 0.78);

  /* ==========================================================
     19.3 BORDERS / DIVIDERS
     ========================================================== */

  --phc-pattern-border: rgba(31, 35, 40, 0.08);
  --phc-pattern-border-strong: rgba(31, 35, 40, 0.12);
  --phc-pattern-border-warm: rgba(180, 120, 16, 0.16);

  --phc-pattern-divider: rgba(31, 35, 40, 0.08);
  --phc-pattern-divider-strong: rgba(31, 35, 40, 0.12);
  --phc-pattern-divider-on-dark: rgba(255, 255, 255, 0.14);

  /* ==========================================================
     19.4 SHADOWS
     ========================================================== */

  --phc-pattern-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --phc-pattern-shadow-sm: 0 4px 12px rgba(16, 24, 40, 0.06);
  --phc-pattern-shadow-md: 0 10px 24px rgba(16, 24, 40, 0.10);
  --phc-pattern-shadow-lg: 0 16px 36px rgba(16, 24, 40, 0.12);

  --phc-pattern-shadow-card-hover:
    0 14px 34px rgba(28, 32, 38, 0.12),
    0 5px 12px rgba(28, 32, 38, 0.07);

  --phc-pattern-shadow-soft-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.88);

  /* ==========================================================
     19.5 RADII
     ========================================================== */

  --phc-pattern-radius-sm: 12px;
  --phc-pattern-radius-md: 16px;
  --phc-pattern-radius-lg: 20px;

  /* ==========================================================
     19.6 SPACING / RHYTHM
     ========================================================== */

  --phc-pattern-section-padding-y: clamp(28px, 3vw, 40px);
  --phc-pattern-section-padding-x: clamp(20px, 2.6vw, 36px);
  --phc-pattern-section-gap: clamp(28px, 3vw, 40px);

  --phc-pattern-block-gap-xs: 10px;
  --phc-pattern-block-gap-sm: 16px;
  --phc-pattern-block-gap-md: 24px;
  --phc-pattern-block-gap-lg: 32px;

  --phc-pattern-content-max: 72rem;
  --phc-pattern-text-max: 70ch;

  /* ==========================================================
     19.7 STATES / MOTION
     ========================================================== */

  --phc-pattern-hover-lift-y: -2px;
  --phc-pattern-hover-scale: 1.01;

  --phc-pattern-transition:
    background-color var(--phc-transition-fast) var(--phc-ease-in-out),
    border-color var(--phc-transition-fast) var(--phc-ease-in-out),
    color var(--phc-transition-fast) var(--phc-ease-in-out),
    box-shadow var(--phc-transition-fast) var(--phc-ease-in-out),
    transform var(--phc-transition-fast) var(--phc-ease-out);

  /* ==========================================================
     19.8 ACCENTS / BADGES / LINES
     ========================================================== */

  --phc-pattern-accent: #ffc107;
  --phc-pattern-accent-dark: var(--phc-brand-yellow-dark);
  --phc-pattern-accent-soft: rgba(255, 193, 7, 0.14);
  --phc-pattern-accent-soft-strong: rgba(255, 193, 7, 0.22);

  --phc-pattern-badge-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 248, 225, 0.92) 100%
  );
  --phc-pattern-badge-border: rgba(255, 193, 7, 0.18);

  --phc-pattern-line-blue: #1f7ae0;
  --phc-pattern-line-blue-soft: rgba(31, 122, 224, 0.14);

  /* ==========================================================
     19.9 THEME ALIASES FOR INTERNAL PATTERNS
     ========================================================== */

  --phc-pattern-theme-white-bg: var(--phc-pattern-surface-white);
  --phc-pattern-theme-white-border: var(--phc-pattern-border);

  --phc-pattern-theme-cream-bg: var(--phc-pattern-surface-cream);
  --phc-pattern-theme-cream-border: var(--phc-pattern-border);

  --phc-pattern-theme-soft-gray-bg: var(--phc-pattern-surface-soft-gray);
  --phc-pattern-theme-soft-gray-border: var(--phc-pattern-border);

  --phc-pattern-theme-yellow-soft-bg: var(--phc-pattern-surface-yellow-soft);
  --phc-pattern-theme-yellow-soft-border: var(--phc-pattern-border-warm);

  --phc-pattern-theme-graphite-bg: var(--phc-pattern-surface-graphite-soft);
  --phc-pattern-theme-graphite-border: rgba(255, 248, 235, 0.12);

  /* ==========================================================
     19.10 MOBILE DENSITY
     На мобилке бордюры визуально остаются,
     но контейнер становится плотнее и экран заполняется контентом.
     ========================================================== */

  --phc-pattern-mobile-padding-y: 20px;
  --phc-pattern-mobile-padding-x: 16px;
  --phc-pattern-mobile-radius: 12px;
  --phc-pattern-mobile-gap: 20px;
}


/* === STEEL / TECH ACCENT === */

--phc-accent-steel: #6f86a3;
--phc-accent-steel-strong: #4f6785;
--phc-accent-steel-soft: rgba(111, 134, 163, 0.18);
--phc-accent-steel-line: rgba(111, 134, 163, 0.35);