/* === Farlinko Blue Scale (Deep→Light) ===
   900 #0B1B3A  | 800 #123065 | 700 #1D4ED8
   600 #2563EB  | 500 #3B82F6 | 400 #60A5FA
   300 #93C5FD  | 200 #BFDBFE | 100 #EAF2FF  | 50 #F5F9FF
================================================= */

:root{
  /* surfaces */
  --bg:        #F5F9FF;   /* 50  页面大背景（极浅蓝）   */
  --surface:   #FFFFFF;   /* 卡片/导航背景              */
  --muted:     #F0F4FF;   /* 模块淡底/输入框hover       */
  --line:      #E5ECFF;   /* 分隔线                     */

  /* text (深色，确保可读) */
  --text:        #0F172A;  /* slate-900 标题/正文 */
  --text-muted:  #475569;  /* slate-600 说明文字 */

  /* primary blue scale */
  --primary-900:#0B1B3A;
  --primary-800:#123065;
  --primary-700:#1D4ED8;
  --primary-600:#2563EB;  /* 主色 */
  --primary-500:#3B82F6;
  --primary-400:#60A5FA;
  --primary-300:#93C5FD;
  --primary-200:#BFDBFE;
  --primary-100:#EAF2FF;
  --primary-50: #F5F9FF;

  /* aliases */
  --primary:    var(--primary-600);
  --accent:     #10B981;  /* 次强调/成功色（保留绿色语义） */

  /* 形状/阴影 */
  --radius: 16px; --radius-sm: 12px; --radius-lg: 24px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-2: 0 10px 20px rgba(15,23,42,.06), 0 3px 6px rgba(15,23,42,.05);

  /* 半透明蓝：给渐变/聚焦用（兼容无 color-mix 的浏览器） */
  --primary-a12:      rgba(37, 99, 235, .12);   /* ≈ primary-600 12% */
  --primary-300-a08:  rgba(147,197,253, .08);   /* ≈ primary-300 8%  */
}

/* 全局：只设置文字颜色，不覆盖页面背景（交给 styles.css 控制） */
body{ color:var(--text); }
h1,h2,h3,h4,h5,h6{ color:var(--text); }
.lead,.kicker,p,li,small{ color:var(--text-muted); }

/* 链接 */
a{ color: var(--primary); }
a:hover{ color: var(--primary-700); }

/* 顶栏（半透明白） */
.header, header.site-header, nav, .navbar{
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(12px);
}

/* 卡片 */
.card,.panel,.box,.feature{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* 按钮：主按钮蓝底白字；次按钮白底蓝字 */
.button, button, .btn{
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
}
.button.primary, .btn-primary, button.primary{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.button.primary:hover, .btn-primary:hover, button.primary:hover{
  background: var(--primary-700);
  box-shadow: var(--shadow-2);
}
.button.ghost, .btn-outline{
  background:#fff;
  color: var(--primary);
  border-color: var(--primary-300);
}
.button.ghost:hover, .btn-outline:hover{
  background: var(--primary-100);
  border-color: var(--primary-500);
}

/* Hero 渐变（深→浅蓝） */
.hero,.jumbotron,.masthead,.hero-pro{
  background:
    radial-gradient(1200px 600px at 20% -20%, var(--primary-a12), transparent 60%),
    radial-gradient(800px 400px  at 90%  10%, var(--primary-300-a08), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--primary-50) 100%);
  border-bottom: 1px solid var(--line);
}
.hero .title,.hero-pro .title{ color: var(--text); }
.hero .meta,.hero-pro .meta{ color: var(--text-muted); }

/* 表格/输入框（浅蓝描边） */
input,select,textarea{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}
input:focus,select:focus,textarea:focus{
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-a12);
}

/* 徽章/统计等淡底 */
.badge{ background:#fff; border: 1px solid var(--line); color: var(--text-muted); }
.cta-banner{ background: linear-gradient(180deg,#fff 0%, var(--primary-50) 100%); border-color: var(--line); }