/**
 * Wordoorio Design Tokens
 *
 * Единый источник правды для всех CSS-значений.
 * Принципы и бренд-правила: Marketing/DESIGN.md
 * Живой превью компонентов: design-system.html
 *
 * Шрифты: Plus Jakarta Sans (основной), Playfair Display (editorial italic)
 * Палитра: бирюзовый спектр (#1B7A94 — главный акцент)
 */

:root {

    /* ===== ТИПОГРАФИКА ===== */

    /* Шрифты */
    --font-primary:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-editorial: 'Playfair Display', Georgia, serif; /* только italic, для editorial заголовков */

    /* Размеры */
    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md:   1.125rem;   /* 18px */
    --font-size-lg:   1.25rem;    /* 20px */
    --font-size-xl:   1.5rem;     /* 24px */
    --font-size-2xl:  1.875rem;   /* 30px */
    --font-size-3xl:  2.5rem;     /* 40px */

    /* Веса */
    --font-weight-light:     300;
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    /* Высота строки */
    --line-height-tight:   1.1;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.6;


    /* ===== ЦВЕТА — БИРЮЗОВЫЙ СПЕКТР (основной акцент) ===== */

    --teal:        #1B7A94;   /* primary brand, кнопки, акценты */
    --teal-bright: #1290B3;   /* ховер, активные состояния */
    --teal-light:  #39A0B3;   /* второстепенные акценты, иконки */
    --teal-dark:   #145f73;   /* pressed, тень кнопки */
    --teal-deep:   #075674;   /* контраст, тени логотипа */

    /* Тил на светлом фоне (для подложек и рамок) */
    --teal-bg:     #edf7fa;
    --teal-border: rgba(27, 122, 148, 0.18);


    /* ===== ЦВЕТА — СВЕТЛАЯ ТЕМА (веб-приложение) ===== */

    --bg:          #f4f7f9;   /* фон страницы */
    --bg-card:     #ffffff;   /* фон карточек */
    --bg-light:    #fafafa;   /* альтернативный светлый фон */

    --border:      #e2e8f0;   /* основная рамка */
    --border-md:   #cbd5e0;   /* более заметная рамка */

    --text-1:      #0f172a;   /* основной текст */
    --text-2:      #4a5568;   /* вторичный текст */
    --text-3:      #94a3b8;   /* приглушённый текст */


    /* ===== ЦВЕТА — ТЁМНАЯ ТЕМА (Telegram Mini App, маркетинг, карточки статистики) ===== */

    --dark-bg-deep:    #071e2a;   /* глубокий фон, обложки */
    --dark-bg-card:    #0c3545;   /* карточки на тёмном */
    --dark-bg-alt:     #0f172a;   /* альтернативный тёмный фон */
    --dark-surface:    #1e293b;   /* секции, панели */
    --dark-divider:    #334155;   /* линии, бордюры */

    --dark-text-1:     #ffffff;
    --dark-text-2:     rgba(255, 255, 255, 0.7);
    --dark-text-muted: #94a3b8;

    /* Градиент тёмной темы — ключевой бренд-фон */
    --dark-gradient: linear-gradient(150deg, #071e2a, #0c3545 30%, #145f73 65%, #1e8ca6);


    /* ===== ЦВЕТА — СТАТУСЫ ===== */

    /* Зелёный — только для кнопок действий на светлом фоне, не как акцент */
    --green:            #22c55e;
    --green-dark:       #16a34a;
    --green-shadow:     rgba(34, 197, 94, 0.3);

    /* Системные */
    --color-success-bg:   #c6f6d5;
    --color-success-text: #22543d;
    --color-error-bg:     #fed7d7;
    --color-error-text:   #c53030;

    /* Рейтинг слов в словаре */
    --rating-new:      #94a3b8;  /* новое (rating 0-3) */
    --rating-learning: #ed8936;  /* изучаю (rating 4-7) */
    --rating-learned:  #22c55e;  /* выучено (rating 8-10) */


    /* ===== ОТСТУПЫ (8px grid) ===== */

    --spacing-0:  0;
    --spacing-1:  0.25rem;  /* 4px */
    --spacing-2:  0.5rem;   /* 8px */
    --spacing-3:  0.75rem;  /* 12px */
    --spacing-4:  1rem;     /* 16px */
    --spacing-5:  1.25rem;  /* 20px */
    --spacing-6:  1.5rem;   /* 24px */
    --spacing-7:  1.75rem;  /* 28px */
    --spacing-8:  2rem;     /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */


    /* ===== РАДИУСЫ ===== */

    --radius-sm:   0.375rem;  /* 6px  — мелкие элементы */
    --radius-md:   0.75rem;   /* 12px — кнопки, теги */
    --radius-lg:   1rem;      /* 16px — карточки */
    --radius-xl:   1.25rem;   /* 20px — крупные карточки */
    --radius-pill: 999px;     /* таблетки, бейджи */


    /* ===== ТЕНИ ===== */

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Тени кнопок (тил) */
    --shadow-teal:       0 4px 12px rgba(27, 122, 148, 0.3);
    --shadow-teal-hover: 0 6px 16px rgba(27, 122, 148, 0.4);

    /* Тёмная тема — тени минимальны, разделение через фоны */
    --shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.3);


    /* ===== ПЕРЕХОДЫ ===== */

    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.2s ease;
    --transition-slow:   all 0.3s ease;


    /* ===== Z-INDEX ===== */

    --z-base:         1;
    --z-overlay:      2;
    --z-dropdown:     10;
    --z-modal:        100;
    --z-notification: 1000;
    --z-tooltip:      10000;


    /* ===== КОНТЕЙНЕРЫ ===== */

    --container-max: 1000px;
    --container-pad: var(--spacing-5);  /* 20px */


    /* ===== BREAKPOINTS (reference) ===== */
    /* Используй в @media, здесь только как документация */
    /* mobile:  480px  */
    /* tablet:  768px  */
    /* desktop: 1024px */
}