/* ===== ROOT.CSS ===== */
/* Базовые стили, переменные, reset */

/* ===== CSS VARIABLES ===== */
:root {
    /* Цвета ссылок */
    --color-link: #43ff7a;
    --color-link-hover: #5aff8f;
    --color-link-visited: #43ff7a; /* Оставляем тот же цвет для visited */
    
    /* RGBA варианты зеленого для разных целей */
    --color-link-border: rgba(67, 255, 122, 0.3);        /* border-bottom ссылок */
    --color-link-border-hover: rgba(67, 255, 122, 0.6);  /* border-bottom при hover */
    --color-link-bg-light: rgba(67, 255, 122, 0.08);     /* легкий фон карточек */
    --color-link-bg-light-hover: rgba(67, 255, 122, 0.12); /* фон карточек при hover */
    --color-link-border-card: rgba(67, 255, 122, 0.15);  /* border карточек */
    --color-link-border-card-hover: rgba(67, 255, 122, 0.25); /* border карточек при hover */
    --color-link-border-item-hover: rgba(67, 255, 122, 0.20); /* border элементов при hover */
    --color-link-shadow: rgba(67, 255, 122, 0.3);        /* тени и эффекты */
    
    --color-bg-main: #0b0e11;
    --color-bg-card: #13171c;
    --color-bg-item: #20272f;
    --color-bg-item-hover: #1c222a;
    
    --color-text-primary: #e5e5e5;
    --color-text-secondary: #8f97a6;
    --color-text-muted: #848484;
    
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-lighter: rgba(255, 255, 255, 0.04);
    --color-border-lightest: rgba(255, 255, 255, 0.05);
    
    /* Типографика */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 13px;
    --font-size-large: 18px;
    
    /* Отступы */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Радиусы */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    
    /* Максимальная ширина контента */
    --max-width-content: 720px;
    
    /* Кнопки действий */
    --btn-action-bg: rgba(255, 255, 255, 0.05);
    --btn-action-bg-hover: rgba(255, 255, 255, 0.1);
    --btn-action-border: rgba(255, 255, 255, 0.1);
    --btn-action-border-hover: rgba(255, 255, 255, 0.2);
    --btn-action-color: #f5f5f5;
    --btn-action-padding: 8px 12px;
    --btn-action-height: 36px; /* Фиксированная высота для всех кнопок */
    --btn-action-gap: 6px;
    --btn-action-radius: var(--radius-md);
    --btn-action-font-size: 14px;
    --btn-action-icon-size: 18px; /* Единый размер иконок */
}

/* ===== RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===== BODY ===== */
body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-main);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-feature-settings: 'kern', 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* ===== LAYOUT UTILITIES ===== */
.content {
    padding: 0px 0 var(--spacing-xl);
}

.wrap {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===== TYPOGRAPHY BASE ===== */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

p {
    margin: 0 0 1em;
}

/* ===== LINKS ===== */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: var(--font-size-small);
}

a:hover {
    color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-hover);
}

/* Исключение: ссылки в тексте статьи не имеют border-bottom и наследуют размер шрифта */
.topic-body a {
    border-bottom: 1px solid var(--color-link-border);
    font-size: inherit;
}

.topic-body a:hover {
    border-bottom-color: var(--color-link-border-hover);
}

/* ===== IMAGES ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}