/**
 * _tokens.css — VelvetNook 设计 Token
 * =====================================
 * 职责：全站 CSS 变量的唯一源头。所有 styles.css / space.css 必须从此处读，
 *      禁止硬编码色值/字体/圆角/动效。
 *
 * ⚠️ 关键约束：
 * - 修改本文件即修改全站设计 —— 改前必读 docs/design/visual-language.md
 * - 严禁新增色值。如需新色，先确认属于以下 5 个色之一：
 *   --bg-base / --bg-surface / --text-primary / --text-secondary / --color-accent
 * - 严禁纯白 #FFFFFF、纯黑 #000000、系统蓝 #007AFF、粉彩疗愈色
 * - 手写体 --font-handwriting 仅限「宠物昵称 / 铭文 / 用户留言」3 处
 *
 * 加载顺序：本文件必须在 styles.css / space.css 之前引用。
 *
 * 关联文档：
 * - docs/design/visual-language.md （规范）
 * - docs/design/product-constitution.md §5 §6 （宪法）
 */

/* ======================================================================
 * 1. 调色板
 * ====================================================================== */

:root {
    /* 1.1 底色层（3 暗） */
    --bg-base:           #1A1612;  /* 全局视口底层 */
    --bg-surface:        #2A2520;  /* 卡片/气泡/按钮底 */
    --bg-overlay:        rgba(26, 22, 18, 0.7);  /* 蒙版/暗角 */

    /* 1.2 文字层（2 暖灰） */
    --text-primary:      #DEDAD2;  /* 标题/正文/按钮文字 */
    --text-secondary:    #6A6E78;  /* 时间戳/元数据/占位符 */

    /* 1.3 情感焦点（2 暖） */
    --color-accent:        #D97742;  /* 暖光：肖像光晕/按钮 hover/装饰 */
    --color-accent-soft:   rgba(217, 119, 66, 0.12);  /* 暖光弱化态（hover 底色） */
    --color-destructive:   #6E4A47;  /* 警示：删除/重置（必配多步确认） */

    /* 1.4 边界线 */
    --border-subtle:     rgba(222, 218, 210, 0.04);  /* 微弱分隔 */
    --border-default:    rgba(222, 218, 210, 0.12);  /* 默认边框 */
    --border-accent:     rgba(217, 119, 66, 0.5);    /* 暖光边框（hover） */

    /* 1.5 反向（用于按钮底色） */
    --on-accent:         #1A1612;  /* 暖光背景上的文字色 */
}

/* ======================================================================
 * 2. 字体
 * ====================================================================== */

:root {
    --font-display:      'Spectral', 'Newsreader', serif;        /* 标题/品牌 */
    --font-body:         'Source Serif 4', Georgia, serif;       /* 正文/UI */
    --font-handwriting:  'Caveat', cursive;                      /* 仅限 3 处 */

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;

    /* 字号（rem，基于 16px root） */
    --fs-h1:             1.5rem;   /* 24px */
    --fs-h2:             1.25rem;  /* 20px */
    --fs-h3:             1.125rem; /* 18px */
    --fs-body:           0.9375rem; /* 15px */
    --fs-caption:        0.8125rem; /* 13px */
    --fs-handwriting:    1.25rem;  /* 20px - 铭文处可放大到 56px */

    /* 行高 */
    --lh-heading:        1.4;
    --lh-body:           1.6;

    /* 字距 */
    --ls-heading:        0.02em;
    --ls-body:           0.01em;
    --ls-uppercase:      0.15em;   /* 用于 WHAT IT IS 之类全大写小标 */
}

/* ======================================================================
 * 3. 圆角
 * ====================================================================== */

:root {
    --radius-pill:       24px;  /* 按钮 */
    --radius-card:       6px;   /* 卡片/气泡/表单容器 */
    --radius-image:      4px;   /* 肖像/图片 */
    --radius-input:      6px;   /* 输入框 */
}

/* ======================================================================
 * 4. 动效
 * ====================================================================== */

:root {
    --motion-duration:   800ms;
    --motion-duration-fast: 300ms;  /* hover 等小动作 */
    --motion-duration-slow: 1200ms; /* 特殊仪式感动作 */
    --motion-easing:     cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ======================================================================
 * 5. 容器与布局
 * ====================================================================== */

:root {
    --container-max:     560px;   /* 桌面/平板内容容器最大宽 */
    --container-pad-mobile: 16px;
    --container-pad-tablet: 32px;
    --container-pad-desktop: 64px;

    --safe-area-top:     44px;    /* 移动端刘海/灵动岛 */
    --safe-area-bottom:  34px;    /* 移动端 Home Indicator */
}

/* ======================================================================
 * 6. 阴影
 * ====================================================================== */

:root {
    /* 全部向内压（inset），禁止外阴影 */
    --shadow-inset-soft:  inset 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-inset-hard:  inset 0 2px 8px rgba(0, 0, 0, 0.6);

    /* 暗角（仅营销页 hero 用） */
    --vignette-hero:      inset 0 0 120px rgba(26, 22, 18, 0.7);
}

/* ======================================================================
 * 7. 颗粒纹理（背景叠加）
 * ====================================================================== */

:root {
    --grain-opacity:        0.06;  /* 营销页 */
    --grain-opacity-soft:   0.04;  /* 领地 */
    --grain-url:            url('/css/film-grain.png');
    --grain-blend:          overlay;
}

/* ======================================================================
 * 8. z-index 分层
 * ====================================================================== */

:root {
    --z-base:               0;
    --z-raised:             10;
    --z-toolbar:            20;
    --z-modal-backdrop:     100;
    --z-modal:              101;
    --z-toast:              200;
}

/* ======================================================================
 * 9. 响应式断点（@media 用，不写 token）
 * ====================================================================== */

/* 移动优先：默认样式 = 移动端
   @media (min-width: 640px)  {  /* tablet */  }
   @media (min-width: 1024px) {  /* desktop */ } */

/* ======================================================================
 * 10. 减弱动效（用户偏好）
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration: 0.01ms;
        --motion-duration-fast: 0.01ms;
        --motion-duration-slow: 0.01ms;
    }
}