/* Базовые переменные для переопределения темами */
:root {
    /* Базовые тени и эффекты */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --theme-transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Светлая тема "Literal" */
  .light {
    /* Основная цветовая схема: пожелтевшая бумага + персиковый */
    --bg-primary: #f8f5e6;           /* Основной фон - светлая пожелтевшая бумага */
    --bg-secondary: #e8e4d3;         /* Вторичный фон - более темная пожелтевшая бумага */
    --bg-tertiary: #f0ebd9;          /* Третичный фон - промежуточный оттенок */
    --accent-primary: #ff9a76;       /* Основной акцент - персиковый */
    --accent-secondary: #e37e52;     /* Вторичный акцент - темно-персиковый */
    --accent-tertiary: #ffb499;      /* Светло-персиковый для ховера */
    --text-primary: #4a4139;         /* Основной текст - темно-коричневый */
    --text-secondary: #6c6359;       /* Вторичный текст - коричнево-серый */
    --text-on-accent: #ffffff;       /* Текст на акцентном фоне - белый */
    --border-color: #d5ceb7;         /* Цвет границ - светло-коричневый */
    --shadow-color: rgba(74, 65, 57, 0.1); /* Цвет теней */
    
    /* Дополнительные цвета для компонентов */
    --status-bar: #e37e52;           /* Статусная строка - темно-персиковый */
    --error-color: #b24c31;          /* Цвет ошибки - красно-коричневый */
    --success-color: #598c59;        /* Цвет успеха - приглушенный зеленый */
    
    /* RGB версии переменных для использования с rgba() */
    --accent-primary-rgb: 255, 154, 118;
    --border-color-rgb: 213, 206, 183;
  }
  
  /* Темная тема "Literal" */
  .dark {
    /* Основная цветовая схема: тёмная бумага + персиковый акцент */
    --bg-primary: #2a2520;           /* Основной фон - тёмная бумага */
    --bg-secondary: #201c18;         /* Вторичный фон - ещё более тёмная бумага */
    --bg-tertiary: #2e2a24;          /* Третичный фон - промежуточный оттенок */
    --accent-primary: #ff9a76;       /* Основной акцент - персиковый (сохраняем) */
    --accent-secondary: #e37e52;     /* Вторичный акцент - темно-персиковый (сохраняем) */
    --accent-tertiary: #864631;      /* Тёмно-оранжевый для ховера */
    --text-primary: #e8e0d0;         /* Основной текст - светло-бежевый */
    --text-secondary: #b5a99a;       /* Вторичный текст - бежевый */
    --text-on-accent: #ffffff;       /* Текст на акцентном фоне - белый */
    --border-color: #3c342e;         /* Цвет границ - тёмно-коричневый */
    --shadow-color: rgba(0, 0, 0, 0.3); /* Цвет теней */
    
    /* Дополнительные цвета для компонентов */
    --status-bar: #97512f;           /* Статусная строка - глубокий персиковый */
    --error-color: #d06d5a;          /* Цвет ошибки - красно-оранжевый */
    --success-color: #79a079;        /* Цвет успеха - приглушенный зеленый */
    
    /* RGB версии переменных для использования с rgba() */
    --accent-primary-rgb: 255, 154, 118;
    --border-color-rgb: 60, 52, 46;
  }
  
  /* Светлая тема "Лесная" */
  .forest-light {
    /* Основная цветовая схема: светло-зеленый + золотистый */
    --bg-primary: #edf3e8;           /* Основной фон - светло-зеленый */
    --bg-secondary: #dae6d1;         /* Вторичный фон - более темный зеленый */
    --bg-tertiary: #e5eedf;          /* Третичный фон - промежуточный оттенок */
    --accent-primary: #89b973;       /* Основной акцент - зеленый */
    --accent-secondary: #6d9559;     /* Вторичный акцент - темно-зеленый */
    --accent-tertiary: #a7cb93;      /* Светло-зеленый для ховера */
    --text-primary: #354e2e;         /* Основной текст - темно-зеленый */
    --text-secondary: #5c7154;       /* Вторичный текст - серо-зеленый */
    --text-on-accent: #ffffff;       /* Текст на акцентном фоне - белый */
    --border-color: #c9dcbe;         /* Цвет границ - светло-зеленый */
    --shadow-color: rgba(53, 78, 46, 0.1); /* Цвет теней */
    
    /* Дополнительные цвета для компонентов */
    --status-bar: #6d9559;           /* Статусная строка - темно-зеленый */
    --error-color: #b25e31;          /* Цвет ошибки - оранжево-коричневый */
    --success-color: #4e7e3e;        /* Цвет успеха - зеленый */
    
    /* RGB версии переменных для использования с rgba() */
    --accent-primary-rgb: 137, 185, 115;
    --border-color-rgb: 201, 220, 190;
  }
  
  /* Темная тема "Лесная" */
  .forest-dark {
    /* Основная цветовая схема: темно-зеленый + золотистый */
    --bg-primary: #1a2f23;           /* Основной фон - темно-зеленый */
    --bg-secondary: #0d1912;         /* Вторичный фон - более темный зеленый */
    --bg-tertiary: #1f3929;          /* Третичный фон - промежуточный оттенок */
    --accent-primary: #c9b17e;       /* Основной акцент - золотистый */
    --accent-secondary: #a89156;     /* Вторичный акцент - темно-золотистый */
    --accent-tertiary: #826e3d;      /* Еще более темный золотистый */
    --text-primary: #d3e1d8;         /* Основной текст - светло-зеленый */
    --text-secondary: #9ab0a3;       /* Вторичный текст - приглушенный зеленый */
    --text-on-accent: #1a2f23;       /* Текст на акцентном фоне - темно-зеленый */
    --border-color: #2c4936;         /* Цвет границ - зеленый */
    --shadow-color: rgba(0, 0, 0, 0.4); /* Цвет теней */
    
    /* Дополнительные цвета для компонентов */
    --status-bar: #a89156;           /* Статусная строка - золотистый */
    --error-color: #b07676;          /* Цвет ошибки - приглушенный красный */
    --success-color: #76b09e;        /* Цвет успеха - бирюзовый */
    
    /* RGB версии переменных для использования с rgba() */
    --accent-primary-rgb: 201, 177, 126;
    --border-color-rgb: 44, 73, 54;
  }
  
  /* Светлая тема "Сепия" */
  .sepia-light {
    /* Основная цветовая схема: сепия + коричневый */
    --bg-primary: #f3e9d9;           /* Основной фон - светлая сепия */
    --bg-secondary: #e8d8b9;         /* Вторичный фон - более темная сепия */
    --bg-tertiary: #eddfc8;          /* Третичный фон - промежуточный оттенок */
    --accent-primary: #955c36;       /* Основной акцент - коричневый */
    --accent-secondary: #7a4726;     /* Вторичный акцент - темно-коричневый */
    --accent-tertiary: #c08c61;      /* Светло-коричневый для ховера */
    --text-primary: #3d2f21;         /* Основной текст - темно-коричневый */
    --text-secondary: #5f4d3b;       /* Вторичный текст - коричневый */
    --text-on-accent: #f3e9d9;       /* Текст на акцентном фоне - светлая сепия */
    --border-color: #cbb897;         /* Цвет границ - коричневый */
    --shadow-color: rgba(61, 47, 33, 0.15); /* Цвет теней */
    
    /* Дополнительные цвета для компонентов */
    --status-bar: #7a4726;           /* Статусная строка - темно-коричневый */
    --error-color: #9a4e4e;          /* Цвет ошибки - красновато-коричневый */
    --success-color: #5b8c5e;        /* Цвет успеха - приглушенный зеленый */
    
    /* RGB версии переменных для использования с rgba() */
    --accent-primary-rgb: 149, 92, 54;
    --border-color-rgb: 203, 184, 151;
  }
  
  /* Темная тема "Сепия" */
  .sepia-dark {
    /* Основная цветовая схема: темная сепия + коричневый */
    --bg-primary: #2e2620;           /* Основной фон - темная сепия */
    --bg-secondary: #241e19;         /* Вторичный фон - более темная сепия */
    --bg-tertiary: #322a23;          /* Третичный фон - промежуточный оттенок */
    --accent-primary: #c08c61;       /* Основной акцент - светло-коричневый */
    --accent-secondary: #955c36;     /* Вторичный акцент - коричневый */
    --accent-tertiary: #7a4726;      /* Темно-коричневый для ховера */
    --text-primary: #e8dfd0;         /* Основной текст - светло-сепия */
    --text-secondary: #b9aa95;       /* Вторичный текст - сепия */
    --text-on-accent: #241e19;       /* Текст на акцентном фоне - темная сепия */
    --border-color: #40352b;         /* Цвет границ - темно-коричневый */
    --shadow-color: rgba(0, 0, 0, 0.3); /* Цвет теней */
    
    /* Дополнительные цвета для компонентов */
    --status-bar: #955c36;           /* Статусная строка - коричневый */
    --error-color: #b37171;          /* Цвет ошибки - приглушенный красный */
    --success-color: #6ea76e;        /* Цвет успеха - приглушенный зеленый */
    
    /* RGB версии переменных для использования с rgba() */
    --accent-primary-rgb: 192, 140, 97;
    --border-color-rgb: 64, 53, 43;
  }

  /* Светлая тема "Авторская" */
  .friend-light {
    --bg-primary: #f2ebe0;
    --bg-secondary: #faf5ed;
    --bg-tertiary: #ede6da;
    --accent-primary: #9c6349;
    --accent-secondary: #84543e;
    --accent-tertiary: #714835;
    --text-primary: #2c2c2e;
    --text-secondary: #5a5854;
    --text-on-accent: #f2ebe0;
    --border-color: #d5ccbf;
    --shadow-color: rgba(44, 44, 46, 0.07);

    --status-bar: #84543e;
    --error-color: #a04444;
    --success-color: #4c7a3a;
    --warning-color: #b8883a;
    --info-color: #3e6f96;

    --accent-primary-rgb: 156, 99, 73;
    --border-color-rgb: 213, 204, 191;
  }

  /* Темная тема "Авторская" */
  .friend-dark {
    --bg-primary: #2c2c2e;
    --bg-secondary: #333335;
    --bg-tertiary: #3a3a3c;
    --accent-primary: #b09470;
    --accent-secondary: #c4a882;
    --accent-tertiary: #9e8462;
    --text-primary: #f1e5d0;
    --text-secondary: #c4b89e;
    --text-on-accent: #2c2c2e;
    --border-color: #4a4a4c;
    --shadow-color: rgba(0, 0, 0, 0.25);

    --status-bar: #c4a882;
    --error-color: #c47070;
    --success-color: #7ba86b;
    --warning-color: #c4a24e;
    --info-color: #7096b8;

    --accent-primary-rgb: 176, 148, 112;
    --border-color-rgb: 74, 74, 76;
  }
  
  /* Анимация смены тем */
  body {
    transition: var(--theme-transition);
  }
  
  /* Дополнительные стили для подсветки активной темы */
  #theme-toggle.active {
    animation: pulse 1.5s infinite alternate;
  }
  
  @keyframes pulse {
    from {
      box-shadow: 0 0 0 0 var(--accent-primary);
    }
    to {
      box-shadow: 0 0 0 8px transparent;
    }
  }