/* 广西信安锐达科技有限公司企业门户网站 - CSS变量系统(明亮风格) */

/* 主色调系统(参考润建股份和egova官网 - 明亮专业风格) */
:root {
  /* 核心色 - 蓝色系专业企业风格 */
  --primary-blue: #0066cc;      /* 主色 - 企业蓝 */
  --primary-light: #0088dd;     /* 浅蓝 - accent */
  --primary-dark: #0052a3;      /* 深蓝 - hover */
  --accent-cyan: #00a3e0;       /* 科技青色 */
  --accent-purple: #6b5b95;     /* 智能紫 */
  --accent-orange: #ff6b35;     /* 强调橙 */
  --success-green: #28a745;     /* 成功绿 */

  /* 背景色 - 明亮专业风格 */
  --bg-white: #ffffff;          /* 主背景 - 纯白 */
  --bg-light: #f8f9fa;          /* 浅灰背景 */
  --bg-gray: #e9ecef;           /* 灰色背景 */
  --bg-dark: #f5f5f5;           /* 深灰背景(用于footer) */
  --bg-overlay: rgba(255, 255, 255, 0.98); /* 遮罩层 */
  --bg-card: rgba(255, 255, 255, 0.95);  /* 卡片背景 */

  /* 文字色 - 清晰易读 */
  --text-dark: #1a1a1a;         /* 主文字 - 深色 */
  --text-main: #333333;         /* 主文字 */
  --text-sub: #666666;          /* 副文字 */
  --text-muted: #999999;        /* 辅助文字 */
  --text-light: #cccccc;        /* 浅色文字 */
  --text-white: #ffffff;        /* 白色文字(深色背景用) */

  /* 边框色 - 清晰边框 */
  --border-light: #e0e0e0;      /* 浅色边框 */
  --border-main: #d0d0d0;       /* 主边框 */
  --border-dark: #c0c0c0;       /* 深色边框 */
  --border-primary: #0066cc;    /* 主色边框 */

  /* 动态渐变 - 企业专业感 */
  --gradient-hero: linear-gradient(135deg, #0066cc 0%, #00a3e0 50%, #0088dd 100%);
  --gradient-blue: linear-gradient(135deg, #0066cc 0%, #0088dd 100%);
  --gradient-light: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

  /* 字体系统 - 2026趋势 */
  --font-title: '思源宋体', 'Noto Serif SC', serif;    /* 标题字体 - 高级感 */
  --font-body: '思源黑体', 'Noto Sans SC', -apple-system, 'Microsoft YaHei', sans-serif; /* 正文字体 - 易读 */
  --font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace; /* 代码字体 */

  /* 字体大小层级 - 4级标题系统 */
  --font-size-hero: 80px;       /* H1: 首页hero大标题 */
  --font-size-h2: 40px;         /* H2: 区域标题 */
  --font-size-h3: 24px;         /* H3: 卡片标题 */
  --font-size-h4: 16px;         /* H4: 正文 */
  --font-size-sub: 15px;        /* 副文字 */
  --font-size-small: 14px;      /* 小文字 */
  --font-size-xs: 13px;         /* 极小文字 */

  /* 字重系统 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* 间距系统 - 极简主义 */
  --spacing-xs: 8px;            /* 极小间距 */
  --spacing-sm: 12px;           /* 小间距 */
  --spacing-md: 16px;           /* 中间距 */
  --spacing-lg: 24px;           /* 大间距 - 卡片间距 */
  --spacing-xl: 28px;           /* 超大间距 - 段落间距 */
  --spacing-xxl: 64px;          /* 区域间距 */

  /* 圆角系统 */
  --radius-sm: 8px;             /* 小圆角 */
  --radius-md: 12px;            /* 中圆角 - 卡片 */
  --radius-lg: 16px;            /* 大圆角 */
  --radius-xl: 20px;            /* 超大圆角 */
  --radius-full: 9999px;        /* 全圆角 - 按钮药丸形 */

  /* 阴影系统 - 明亮风格柔和阴影 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);          /* 极小阴影 */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);           /* 小阴影 */
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);           /* 中阴影 - hover */
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);          /* 大阴影 - 卡片 */
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);         /* 超大阴影 */
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.20);        /* 巨大阴影 - hero */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);        /* 卡片阴影 */
  --shadow-blue: 0 4px 12px rgba(0, 102, 204, 0.15);    /* 蓝色阴影 - accent */

  /* 动画时长 */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-hero: 10s;         /* hero渐变流动周期 */

  /* 缓动函数 */
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);

  /* 布局尺寸 */
  --max-width: 1600px;          /* 最大内容宽度 */
  --header-height: 72px;        /* 顶部导航高度 */
  --hero-height: 100vh;         /* hero区域高度 */

  /* 响应式断点 */
  --breakpoint-mobile: 768px;   /* 移动端断点 */
  --breakpoint-tablet: 1200px;  /* 平板断点 */
}

/* 响应式调整 - 移动端字体缩小 */
@media (max-width: 768px) {
  :root {
    --font-size-hero: 48px;
    --font-size-h2: 28px;
    --font-size-h3: 20px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 40px;
  }
}

/* 响应式调整 - 平板 */
@media (min-width: 768px) and (max-width: 1200px) {
  :root {
    --font-size-hero: 60px;
    --font-size-h2: 32px;
    --font-size-h3: 22px;
    --spacing-lg: 22px;
    --spacing-xl: 26px;
  }
}