@charset "UTF-8";
/* ============================================================================
   variables.css — 设计令牌（Design Tokens）
   广州蓝色能源研究院官网 · 前端工程
   ----------------------------------------------------------------------------
   全部取值从 UI 设计稿（UI润色版/index.html）提取，任何组件样式必须引用本文件
   的变量，禁止在组件中散落魔法数字。
   ========================================================================== */

:root {
  /* ---------------- 品牌色 ----------------
     deep  深海蓝：主色 / 导航底 / 标题
     light 海洋蓝：辅助色 / 渐变亮端 / 描边
     cyan  海洋青：点缀色 / 成功态 / 渐变收尾
     red   党建红：党建主题 / 错误态 / 危险操作
  ------------------------------------------ */
  --deep: #0A4A8C;
  --deep-dark: #062E5C;
  --deep-hover: #083A6E;
  --deep-mid: #0E5FA6;
  --deep-bright: #1173C4;
  --light: #4693D0;
  --cyan: #14B8A6;
  --cyan-dark: #0E9F91;
  --cyan-deep: #0F8A82;
  --red: #C82423;
  --red-dark: #A01D1C;
  --red-deep: #A01D1C;
  --red-bright: #D33430;

  /* ---------------- 中性色 ---------------- */
  --bg: #F5F7FA;          /* 页面底色 */
  --bg-soft: #F8FBFE;     /* 页面底色（氛围渐变起点） */
  --bg-soft-2: #F1F6FB;   /* 页面底色（氛围渐变中点） */
  --bg-soft-3: #EDF3FA;   /* 页面底色（氛围渐变终点） */
  --card: #FFFFFF;        /* 卡片底 */
  --border: #E2E8F0;      /* 常规描边 */
  --line: #EDF2F7;        /* 浅分隔线 */
  --text: #1A202C;        /* 正文 */
  --sub: #4A5568;         /* 次级文字 */
  --muted: #A0AEC0;       /* 辅助文字 / 占位 */
  --dark: #1A1A1A;        /* 页脚底 */
  --dark-2: #161A21;      /* 页脚渐变起点 */
  --dark-3: #0F131A;      /* 页脚渐变终点 */
  --dark-line: #2D333B;   /* 页脚分隔线 */
  --dark-text: #C6CDD6;   /* 页脚正文 */
  --dark-muted: #8A94A0;  /* 页脚版权 */

  /* 图片占位底色 */
  --ph-bg: #E8EDF3;
  --ph-line: #C4D8EA;
  --ph-text: #7E9FBE;
  --ph-text-soft: #93B2CE;
  --ph-grad-a: #EFF6FC;
  --ph-grad-b: #DFECF7;

  /* ---------------- 阴影 ---------------- */
  --shadow-sm: 0 2px 8px rgba(10, 74, 140, .08);
  --shadow: 0 2px 8px rgba(10, 74, 140, .08);
  --shadow-lg: 0 8px 24px rgba(10, 74, 140, .14);
  --shadow-xl: 0 16px 36px rgba(10, 74, 140, .15);

  /* ---------------- 圆角 ---------------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-round: 20px;

  /* ---------------- 容器与栅格 ---------------- */
  --container: 1200px;        /* 内页容器宽 */
  --container-home: 1400px;   /* 首页容器宽 */
  --container-pad: 20px;      /* 容器左右内边距 */
  --grid-gap: 20px;           /* 栅格间距 */

  /* ---------------- 间距阶梯 ---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------------- 字号阶梯 ---------------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 26px;
  --fs-5xl: 30px;
  --fs-6xl: 36px;
  --fs-7xl: 40px;
  --fs-9xl: 90px;

  /* ---------------- 结构尺寸 ---------------- */
  --header-brand-h: 92px;   /* 品牌行高 */
  --nav-h: 64px;            /* 主导航行高 */
  --banner-h: 520px;        /* 首页轮播高 */
  --dropdown-top: 64px;     /* 下拉菜单定位基线 */

  /* ---------------- 层级 ---------------- */
  --z-ambient: 0;
  --z-content: 1;
  --z-nav: 500;
  --z-dropdown: 600;
  --z-backtop: 900;
  --z-modal: 1000;
  --z-toast: 2000;

  /* ---------------- 交互与动效 ---------------- */
  --ease: .2s;
  --ease-slow: .25s;
  --ease-glow: .35s;
  --dur-banner: .6s;

  /* ---------------- 字体族 ---------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}