/* ============================================
   CSS Variables - Global Design Tokens
   ============================================ */

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Light.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Regular.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Medium.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Bold.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Bold.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-ExtraBold.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms The One Universal Grotesk';
    src: url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Black.woff2') format('woff2'),
        url('../../assets/tt-norms-the-one-universal-grotesk/TTNorms-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primary Colors */
    /* Тон подобран так, чтобы белый текст на заливке давал ровно 4.5:1:
       на #7b61ff выходило 4.2:1, а кегль кнопки под крупный текст не
       подходит. Разница со старым значением — 2 % светлоты. */
    --primary-purple: #755aff;
    --primary-purple-hover: #6d41b8;
    --primary-purple-light: #f5f3ff;

    /* Accent Colors */
    --accent-pink: #f43f5e;
    --accent-green: #10b981;
    --accent-orange: #f59e0b;
    --accent-red: #ef4444;

    /* Badge Colors */
    --badge-pink: #ec4899;

    /* Background Colors */
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --bg-off-white: #fcfcfc;
    --bg-purple-light: #f5f3ff;
    --bg-purple-muted: #ece6fa;
    --bg-purple-pale: #d1c4e9;
    --bg-beige: #fffbf0;
    --bg-warm-beige: #fdf5e6;
    --bg-yellow: #fff8e1;
    --bg-pink: #fff0f5;
    --bg-peach: #fff5f2;
    --bg-blue-light: #eef2ff;
    --bg-hero-body: #f8f8f6;
    --bg-placeholder: #efefef;
    --bg-gray-placeholder: #dddddd;

    /* Badge Backgrounds */
    --bg-badge-purple: #e9d5ff;
    --bg-badge-green: #d1fae5;
    --bg-badge-red: #fee2e2;
    --bg-badge-blue: #dbeafe;

    /* Text Colors */
    --text-dark: #1e1e1e;
    --text-primary: #1a1a1a;
    --text-gray: #666666;
    --text-light: #6b7280;
    /* Значения подобраны под 4.5:1 на белом: было #9ca3af (2.54:1) и
       #999999 (2.85:1) — мелкие подписи и старая цена не читались. */
    --text-muted: #6d7787;
    --text-medium: #555555;
    --text-body: #4b5563;
    --text-strikethrough: #767676;

    /* Border Colors */
    --border-light: #eee;
    --border-lighter: #f3f4f6;
    --border-gray: #e5e7eb;

    /* Overlays */
    --overlay-subtle: rgba(0, 0, 0, 0.1);
    --overlay-light: rgba(0, 0, 0, 0.2);
    --overlay-medium: rgba(0, 0, 0, 0.5);

    /* Layout */
    --container-width: 1200px;
    --section-padding: 60px 0;

    /* Hero: плита, панель хедера, вырез слайдера.
       Размеры сняты с прототипа Hero Prototype.dc.html (1440 / 390). */
    --plate: #EFE9FB;
    --plate-soft: #F1ECFD;
    --pill: #E7DEFB;
    --ink: #2B1A5E;
    --ink-h1: #35176B;
    --ink-pill: #3E2A78;
    --ink-body: #6B6480;
    --accent: #6D28D9;
    --plate-max: 1240px;
    --notch-w: 330px;
    --notch-h: 90px;
    --notch-r: 34px;
    --card-r: 28px;

    /* Плитки категорий на главной. Цвета сняты пипеткой с самих картинок:
       фон у них залит, не прозрачен, поэтому фон плитки обязан совпадать
       с фоном картинки — иначе на стыке видно прямоугольный шов. */
    --cat-medical-bg: #FFF8F2;
    --cat-cosmetology-bg: #FDF5FF;
    /* У этой картинки фон вычищен в прозрачность, поэтому цвет плитки
       выбирается свободно, а не подгоняется под кадр. */
    --cat-chinese-bg: #F1ECFD;

    /* Стрелка на плитке — «пилюля» в тон своей плитки, а не общий сиреневый
       кружок: так же на референсе akademy21.ru. */
    --cat-medical-arrow: #FBE3CE;
    --cat-cosmetology-arrow: #EDE0FA;
    --cat-chinese-arrow: #E9E2FB;
    --cat-massage-bg: #FFF5F5;
    --cat-massage-arrow: #FBDFDF;

    /* Высота липкой панели хедера: на неё опирается и отрицательный
       margin плиты hero, и scroll-padding для якорей. */
    --header-h: 92px;
    --header-h-mobile: 76px;

    /* Слои. Значения назначались на глаз, и попап наград оказался на одной
       отметке с шапкой — какой из них сверху, решал порядок в документе. */
    --z-floating: 900;   /* плавающий ролик — под шапкой */
    --z-backdrop: 998;   /* затемнение под мобильным меню */
    --z-header: 1000;
    --z-menu: 1001;      /* гамбургер и панель меню — над шапкой */
    --z-modal: 1200;     /* попапы и модалки — над всем */

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 30px;
    --radius-full: 50px;

    /* Shadows */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 40px rgba(124, 97, 255, 0.15);
    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-certificate: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-book: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* Мягкое наведение: общая тень для карточек курсов и плиток категорий */
    --shadow-hover-soft: 0 12px 28px -14px rgba(17, 12, 46, 0.18);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Font Families */
    --font-main: 'TT Norms The One Universal Grotesk', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-script: 'Marck Script', cursive;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-h2: 2.2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --text-6xl: 3.5rem;

    /* Line Heights */
    --leading-tighter: 1.05;
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.4;
    --leading-relaxed: 1.6;

    /* Breakpoints */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1024px;

    /* Подвал. Тёмная тема отсюда убрана: подвал светлый, и семь из восьми
       её токенов не использовались ни разу. */
    --footer-accent: #9e1033;
}