/* backend/static/css/scouties-theme.css */

:root {
  /* 顏色 */
  --sc-purple: #5E6AEC;
  --sc-orange: #F5A623;
  --sc-gradient: linear-gradient(120deg, #5E6AEC, #F5A623);

  --sc-bg-main: #FFFFFF;
  --sc-bg-soft: #F5F5F7;
  --sc-bg-hero: linear-gradient(180deg, #EAF2FF 0%, #FFFFFF 60%);

  --sc-text-main: #333333;
  --sc-text-sub: #666666;
  --sc-text-muted: #999999;

  /* 字級設定 */
  --sc-font-size-base: 16px;      /* 全站基準字級 */
  --sc-font-size-content: 18px;   /* 內文主要閱讀字級（約 18px，可之後再調整） */
  --sc-line-height-content: 1.8;  /* 內文行距 */

  /* ✅ 新增：Toast 專用顏色 */
  --sc-toast-bg-primary: var(--sc-purple);
  --sc-toast-bg-success: #3BB273;   /* 綠色：答對／成功 */
  --sc-toast-bg-warning: var(--sc-orange);
  --sc-toast-bg-error: #FF5A5F;     /* 紅色：錯誤時可以用 */
  --sc-toast-text: #FFFFFF;

  /* 圓角 & 陰影 */
  --sc-radius-card: 20px;
  --sc-radius-pill: 999px;
  --sc-shadow-card: 0 4px 12px rgba(0,0,0,0.12);
  --sc-shadow-btn: 0 6px 16px rgba(0,0,0,0.15);
}

/* 可選：一些共用元件 */
.btn-sc-primary {
  background: var(--sc-gradient);
  color: #fff;
  border-radius: var(--sc-radius-pill);
  box-shadow: var(--sc-shadow-btn);
  border: none;
}

.card-sc {
  background: #fff;
  border-radius: var(--sc-radius-card);
  box-shadow: var(--sc-shadow-card);
}

/* ✅ Scouties 共用 Toast 樣式 */
.toast-sc {
  position: fixed;
  top: 16px;
  right: 16px;
  max-width: 320px;

  /* ✅ 改成你想要的膠囊樣式 */
  padding: 0.5rem 1rem;
  border-radius: var(--sc-radius-pill);       /* 用共用變數 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  background: var(--sc-toast-bg-primary);
  color: var(--sc-toast-text);
  font-size: 14px;
  line-height: 1.5;
  z-index: 9999;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 出現時加這個 class */
.toast-sc.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* 類型顏色（之後 JS 可加上這些 class） */
.toast-sc.success {
  background: var(--sc-toast-bg-success);
}

.toast-sc.warning {
  background: var(--sc-toast-bg-warning);
}

.toast-sc.error {
  background: var(--sc-toast-bg-error);
}

/* ==========
 * Global typography
 * 放大全站基準字級（標題、按鈕等）
 * ========== */
html {
  /* Bootstrap 預設是 16px，保留這個當基準 */
  font-size: var(--sc-font-size-base);
}

body {
  font-size: 1rem;                 /* = 16px，跟著 html 走 */
  color: var(--sc-text-main);      /* 用共用文字顏色 */
  line-height: 1.6;                /* 全站預設行距 */
}

/* 主要閱讀區塊：讓內文變大好讀 */
.sc-content-text,
.story-text p,
.story-text ul,
.story-text ol {
  font-size: calc(var(--sc-font-size-content) / var(--sc-font-size-base) * 1rem);
  line-height: var(--sc-line-height-content);
}

/* 列表項目之間多一點間距 */
.story-text ul li,
.story-text ol li {
  margin-bottom: 0.25rem;
}