/* ============================================================
   TelegramCRM Design Tokens
   Premium mobile app design system
   ============================================================ */

:root {
    /* ---- Telegram Theme Colors (with sensible fallbacks) ---- */
    --bg-color: var(--tg-theme-bg-color, #ffffff);
    --text-color: var(--tg-theme-text-color, #1c1c1e);
    --hint-color: var(--tg-theme-hint-color, #8e8e93);
    --link-color: var(--tg-theme-link-color, #007aff);
    --button-color: var(--tg-theme-button-color, #007aff);
    --button-text-color: var(--tg-theme-button-text-color, #ffffff);
    --secondary-bg: var(--tg-theme-secondary-bg-color, #f2f2f7);
    --header-bg: var(--tg-theme-header-bg-color, #007aff);
    --accent-text: var(--tg-theme-accent-text-color, #007aff);
    --section-bg: var(--tg-theme-section-bg-color, #ffffff);
    --section-header: var(--tg-theme-section-header-text-color, #6d6d72);
    --subtitle-text: var(--tg-theme-subtitle-text-color, #8e8e93);
    --destructive: var(--tg-theme-destructive-text-color, #ff3b30);

    /* ---- Derived Colors ---- */
    --separator-color: rgba(60, 60, 67, 0.08);
    --separator-color-opaque: #e5e5ea;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --card-shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    --fab-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
    --nav-shadow: 0 -1px 0 rgba(60, 60, 67, 0.08);
    --toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    --input-shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.12);

    /* ---- Semantic Badge Colors ---- */
    --badge-success-bg: #e8f5e9;
    --badge-success-text: #1b5e20;
    --badge-danger-bg: #ffebee;
    --badge-danger-text: #b71c1c;
    --badge-warning-bg: #fff8e1;
    --badge-warning-text: #e65100;
    --badge-info-bg: #e3f2fd;
    --badge-info-text: #0d47a1;

    /* ---- Toast Colors ---- */
    --toast-success-bg: #34c759;
    --toast-error-bg: #ff3b30;

    /* ---- Border Radius ---- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 100px;
    --radius-round: 50%;

    /* ---- Spacing ---- */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* ---- Layout ---- */
    --nav-height: 60px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --page-padding-x: 14px;
    --page-padding-top: 12px;
    --fab-size: 56px;
    --fab-offset: 20px;

    /* ---- Typography ---- */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
                    Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 28px;
    --text-3xl: 34px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    /* ---- Transitions ---- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ---- Z-Index Scale ---- */
    --z-base: 1;
    --z-sticky: 10;
    --z-fab: 50;
    --z-nav: 100;
    --z-overlay: 200;
    --z-toast: 1000;
}