/**
 * Gyro Design Tokens
 * 纯净 CSS 变量库，定义色彩、排版、圆角、空间与光影基石
 */

@import url("/fonts/fonts.css");

:root {
  /* ================= 纸本自然调色板 (Tactile Paper & Low-Saturation Palette) ================= */
  --paper: #faf8f3;                    /* 核心底纸色：透亮暖调白棉纸，温和不刺目，保留轻微自然触感 */
  --surface: #f0ebd9;                  /* 浅温润衬底：3D 纸板、卡片衬底，具有柔和厚度感 */
  --surface-subtle: #f7f4ec;           /* 极浅纸本底色：表单输入框、线框按钮底色 */
  --line: #ded7c8;                     /* 纸质纤维分界线：克制温润的结构分割线 */
  --line-strong: #c8c0b0;              /* 深纤维边界线：线框按钮外沿与结构描边 */
  --border-input: #c4beaf;             /* 表单边框色 */

  --ink: #18201a;                      /* 曜石炭墨：主文本与核心按钮，低眩光、沉静深邃 */
  --ink-soft: #2e3931;                 /* 次级炭墨：次级标题与正文段落 */
  --muted: #647266;                    /* 鼠尾草灰：清晰低饱和的辅助信息与时间戳色彩 */
  --muted-light: #8e9c90;              /* 浅苔灰：注释、微标与占位符 */

  /* 核心品牌色（优雅低饱和，告别高艳霓虹） */
  --accent: #2a7352;                   /* 罗勒翡翠：沉稳自然、具鲜明性格但温和不刺目的核心触点 */
  --accent-hover: #1f5a3f;             /* 浓郁松影绿：悬浮聚焦高亮态 */
  --accent-active: #174732;            /* 墨绿按压态 */
  --accent-soft: rgba(42, 115, 82, 0.09); /* 微翠漫射底色 */
  --accent-border: rgba(42, 115, 82, 0.25); /* 柔和翠绿细线 */

  /* 语义与破坏性态 */
  --danger: #b8424f;                   /* 陶土野莓红：低饱和自然警示，告别刺目数码警笛色 */
  --danger-hover: #9c3440;             /* 赭石深红 */
  --danger-soft: rgba(184, 66, 79, 0.08); /* 陶土粉柔和底色 */
  --danger-border: rgba(184, 66, 79, 0.28);
  --danger-bg: #8c2e39;                /* 报错底色 */

  /* ================= 动感高光与微调扩展色阶 (Calibrated Accents) ================= */
  --accent-kinetic: #3b8a67;           /* 舒缓薄荷苔青：微光交互与实时状态微标 */
  --accent-sun: #c6822b;               /* 蜂蜡琥珀金：背书星徽、典籍烫金质感成就徽章 */
  --accent-coral: #b8594e;             /* 焙烤粉土珊瑚：行动标签与温和呼应点 */
  --accent-cyan: #367988;              /* 北欧瓦青/蓝鼠：技术蓝图与架构流向拓扑 */
  --accent-citron: #6f8832;            /* 山葵苔青：沉着生机指标微标 */

  /* ================= 首页展厅主题变量 (Landing Main-Card Showcase Theme - Plan A) ================= */
  /* 严格遵循 Primitive -> Semantic -> Component 映射，严禁覆盖全站全局品牌主色 --accent: #2a7352 */
  --lp-color: var(--accent-cyan, #367988);             /* 瓦青：首页展台主视觉与激活态 */
  --lp-strong: #2b6572;                               /* 深瓦青：高对比文本与聚焦外环 */
  --lp-soft: rgba(54, 121, 136, 0.10);                /* 瓦青柔和半透明底衬 */
  --lp-border: rgba(54, 121, 136, 0.28);              /* 瓦青卡片边框与细线 */

  /* ================= 核心按钮设计系统变量 (Button System Tokens) ================= */
  --btn-primary-bg: var(--ink);
  --btn-primary-text: var(--paper);
  --btn-primary-border: var(--ink);
  --btn-primary-hover-bg: #29342b;
  --btn-primary-hover-border: #29342b;
  --btn-primary-active-bg: #131914;

  --btn-accent-bg: var(--accent);
  --btn-accent-text: #ffffff;
  --btn-accent-border: var(--accent);
  --btn-accent-hover-bg: var(--accent-hover);
  --btn-accent-hover-border: var(--accent-hover);
  --btn-accent-active-bg: var(--accent-active);

  --btn-secondary-bg: var(--surface-subtle);
  --btn-secondary-text: var(--ink);
  --btn-secondary-border: var(--line-strong);
  --btn-secondary-hover-bg: #ede7da;
  --btn-secondary-hover-border: #9e9686;
  --btn-secondary-active-bg: #e2dbcd;

  --btn-soft-bg: var(--accent-soft);
  --btn-soft-text: var(--accent);
  --btn-soft-border: var(--accent-border);
  --btn-soft-hover-bg: rgba(42, 115, 82, 0.16);
  --btn-soft-hover-border: var(--accent);

  --btn-quiet-text: var(--muted);
  --btn-quiet-hover-text: var(--ink);
  --btn-quiet-hover-bg: rgba(24, 32, 26, 0.05);

  --btn-danger-text: var(--danger);
  --btn-danger-border: var(--danger-border);
  --btn-danger-bg: var(--danger-soft);
  --btn-danger-hover-bg: rgba(184, 66, 79, 0.14);
  --btn-danger-hover-border: var(--danger);

  --btn-disabled-bg: #e9e4d8;
  --btn-disabled-text: #9f988b;
  --btn-disabled-border: #d8d1c2;

  /* ================= 字体排版体系 (Typography) ================= */
  --sans: "MiSans VF", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  --display: "Smiley Sans", var(--sans);

  /* 基础文本属性 */
  font-family: var(--sans);
  font-weight: 330;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ================= 圆角体系 (Border Radii) ================= */
  --radius-xs: 2px;
  --radius-sm: 3px;                  /* 核心微圆角：按钮、输入框、Notice */
  --radius-md: 6px;                  /* 板面圆角：Summary Plate、展示卡 */
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ================= 阴影与光影体系 (Shadows) ================= */
  --shadow-ambient: 0 4px 20px rgba(0, 0, 0, 0.05); /* 柔和漫射环境光 */
  --shadow-notice: 0 6px 30px rgba(24, 32, 25, 0.12); /* 悬浮胶囊轻阴影 */
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.08);    /* 悬浮微升阴影 */

  /* ================= A24 电影级渐变与暗角 (Cinematic Gradients) ================= */
  --vignette-subtle: radial-gradient(circle at 50% 50%, rgba(250, 248, 242, 0) 55%, rgba(40, 44, 41, 0.05) 100%);
  --vignette-cinematic: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%);
  --gradient-reveal: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-expand: 0.55s;

  /* ================= 空间栅格体系 (Spacing Scale) ================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ================= 聚焦环无障碍标准 ================= */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 4px;
}