/* ============================================================================
 * Mira 觅画 · Design Tokens v1 (印社案头 light)
 *
 * 设计原则：三层 token 架构
 *   Layer 1 PRIMITIVE  ─→  原色 / 不带语义 / 不直接用在组件
 *   Layer 2 SEMANTIC   ─→  语义角色 / surface / text / border / status
 *   Layer 3 COMPONENT  ─→  组件特化 / button / input / modal / card
 *
 * 加载顺序：必须最后加载（覆盖优先级最高），逐步替代：
 *   - style.css :root             (老 dark 基底)
 *   - redesign-evolution.css :root (中间层)
 *   - ink-atelier.css :root        (light overlay)
 *
 * 兼容层：保留旧名字（--bg-primary / --accent / --hair 等），
 *        现有 CSS / JS 可继续工作，下个 step 再迁移。
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

/* ============================================================================
 * Layer 1 — PRIMITIVE
 * 仅原色 + 灰阶，不带任何语义。命名按色系 + 明度。
 * ============================================================================ */
:root {
    /* 墨 ink — 中性深色 (text / dark surface) */
    --ink-50:  #fafaf8;
    --ink-100: #f4f1ea;
    --ink-200: #e8e0d0;
    --ink-300: #a39282;
    --ink-500: #6b5d4f;
    --ink-700: #3d362f;
    --ink-900: #1a1714;

    /* 桑皮纸 paper — 米白底色 (背景层级) */
    --paper-50:  #faf6ee;
    --paper-100: #f5ede0;
    --paper-200: #f0ebe0;
    --paper-300: #e8ddc8;
    --paper-400: #d8c9ad;

    /* 朱砂 seal — 主品牌色 (CTA / accent / focus) */
    --seal-50:  #fdf3f1;
    --seal-100: #f9d8d2;
    --seal-300: #e08176;
    --seal-500: #c4493a;   /* ★ 主朱砂 */
    --seal-700: #9c2d1f;
    --seal-900: #6e1c12;

    /* 古铜金 gold — 数字 / 价格 / 重要数据 */
    --gold-50:  #faf3e3;
    --gold-100: #f0dfb6;
    --gold-300: #d4b683;
    --gold-500: #a47e3b;   /* ★ 主古铜金 */
    --gold-700: #74591f;

    /* 翠墨 jade — 成功 / 完成 (替代鲜艳绿) */
    --jade-100: #c8dccf;
    --jade-300: #4A8870;
    --jade-500: #1F4736;
    --jade-700: #102b21;

    /* === 间距 spacing (4 / 8 grid) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* === 圆角 radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* === 字号 type scale === */
    --text-xs:      12px;
    --text-sm:      13px;
    --text-base:    14px;   /* alias */
    --text-md:      14px;
    --text-lg:      16px;
    --text-xl:      18px;
    --text-2xl:     20px;
    --text-3xl:     24px;
    --text-display: 32px;

    --leading-tight:   1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    /* === 阴影 shadow (印社纸面感: inset 高光 + warm 投影) === */
    --shadow-xs:    0 1px 2px rgba(80,60,40,.06);
    --shadow-sm:    0 1px 0 rgba(255,255,255,.6) inset, 0 2px 8px rgba(80,60,40,.08);
    --shadow-md:    0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px rgba(80,60,40,.10);
    --shadow-lg:    0 1px 0 rgba(255,255,255,.8) inset, 0 16px 48px rgba(80,60,40,.14);
    --shadow-press: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(196,73,58,.12);
    --shadow-ring:  0 0 0 3px rgba(196,73,58,.18);

    /* === 动效 motion === */
    --motion-fast:   150ms;
    --motion-base:   200ms;
    --motion-slow:   320ms;
    --ease-out:      cubic-bezier(.2,.8,.2,1);
    --ease-spring:   cubic-bezier(.5,1.6,.4,.9);

    /* === 层级 z-index === */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  1000;
    --z-modal:    2000;
    --z-toast:    3000;

    /* === 字体 font === */
    --font-display: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
    --font-mono:    'Source Serif 4', 'Noto Serif SC', Georgia, serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC',
                    'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/* ============================================================================
 * Layer 2 — SEMANTIC
 * 语义化角色，组件应当用这层而非 primitive。
 * ============================================================================ */
:root {
    /* surface — 背景层级 */
    --surface-base:    var(--paper-50);    /* body / 主背景 */
    --surface-raised:  var(--paper-100);   /* hover / 次级 panel */
    --surface-card:    #ffffff;            /* card / 突出内容 */
    --surface-sunken:  var(--paper-200);   /* disabled / muted bg */
    --surface-overlay: rgba(26,23,20,.5);  /* modal scrim */

    /* text — 文字层级 */
    --text-primary:    var(--ink-900);
    --text-secondary:  var(--ink-700);
    --text-muted:      var(--ink-500);
    --text-disabled:   var(--ink-300);
    --text-inverse:    var(--paper-50);
    --text-accent:     var(--seal-500);
    --text-number:     var(--gold-500);

    /* border — 边框层级 */
    --border-subtle:   var(--paper-300);
    --border-default:  var(--paper-400);
    --border-strong:   var(--ink-300);
    --border-accent:   var(--seal-100);
    --border-focus:    var(--seal-500);

    /* status — 状态色 */
    --status-success:  var(--jade-300);
    --status-warning:  var(--gold-500);
    --status-error:    var(--seal-500);
    --status-info:     var(--ink-500);

    /* accent — 品牌强调 */
    --accent-base:     var(--seal-500);
    --accent-hover:    var(--seal-700);
    --accent-press:    var(--seal-900);
    --accent-soft:     rgba(196,73,58,.08);
    --accent-line:     rgba(196,73,58,.18);
    --accent-glow:     rgba(196,73,58,.30);

    /* gradient */
    --gradient-brand:  linear-gradient(135deg, var(--seal-500), var(--gold-500));
    --gradient-paper:  linear-gradient(180deg, var(--paper-100), var(--paper-50));
}

/* ============================================================================
 * Layer 3 — COMPONENT
 * 组件特化 token，组件 CSS 用这层。
 * ============================================================================ */
:root {
    /* button */
    --btn-primary-bg:    var(--accent-base);
    --btn-primary-fg:    var(--text-inverse);
    --btn-primary-hover: var(--accent-hover);
    --btn-primary-press: var(--accent-press);
    --btn-primary-shadow: var(--shadow-press);

    --btn-secondary-bg:    transparent;
    --btn-secondary-fg:    var(--accent-base);
    --btn-secondary-bd:    var(--border-accent);
    --btn-secondary-hover-bg: var(--accent-soft);

    --btn-ghost-bg:        transparent;
    --btn-ghost-fg:        var(--text-secondary);
    --btn-ghost-hover-bg:  var(--surface-raised);

    --btn-danger-bg:       var(--status-error);
    --btn-danger-fg:       var(--text-inverse);

    --btn-disabled-bg:     var(--surface-sunken);
    --btn-disabled-fg:     var(--text-disabled);

    /* input / form */
    --input-bg:        #ffffff;
    --input-border:    var(--border-default);
    --input-border-focus: var(--border-focus);
    --input-fg:        var(--text-primary);
    --input-placeholder: var(--text-disabled);
    --input-shadow-focus: var(--shadow-ring);

    /* card */
    --card-bg:         var(--surface-card);
    --card-border:     var(--border-subtle);
    --card-shadow:     var(--shadow-sm);
    --card-radius:     var(--radius-lg);

    /* modal */
    --modal-bg:        var(--surface-card);
    --modal-overlay:   var(--surface-overlay);
    --modal-shadow:    var(--shadow-lg);
    --modal-radius:    var(--radius-xl);

    /* tag / chip / pill */
    --tag-bg:          var(--accent-soft);
    --tag-fg:          var(--accent-base);
    --tag-border:      var(--accent-line);

    /* progress / step */
    --step-pending-bg:    var(--surface-sunken);
    --step-pending-fg:    var(--text-muted);
    --step-active-bg:     var(--accent-base);
    --step-active-fg:     var(--text-inverse);
    --step-active-ring:   var(--accent-glow);
    --step-done-bg:       var(--gold-500);
    --step-done-fg:       var(--text-inverse);
    --step-error-bg:      var(--status-error);
    --step-error-fg:      var(--text-inverse);
    --step-line-pending:  var(--border-default);
    --step-line-done:     var(--gold-500);
}

/* ============================================================================
 * 兼容层 — 旧 token 名映射到新 semantic
 * 现有 style.css / redesign-evolution.css / ink-atelier.css / app.js 中的
 * --bg-primary / --accent / --hair 等仍可用。
 * 这一层让旧代码视觉 100% 等价于 ink-atelier.css 当前生效版本。
 * ============================================================================ */
:root {
    /* 来自 style.css */
    --bg-primary:    var(--surface-base);
    --bg-secondary:  var(--surface-raised);
    --bg-card:       var(--surface-card);
    --bg-hover:      var(--surface-raised);
    --border:        var(--border-default);
    --accent:        var(--accent-base);
    --accent-shadow: var(--accent-line);
    --success:       var(--status-success);
    --warning:       var(--status-warning);
    --error:         var(--status-error);
    --gradient-1:    var(--gradient-brand);
    --gradient-2:    var(--gradient-paper);

    /* 来自 redesign-evolution.css */
    --gold:        var(--gold-500);
    --gold-dim:    var(--gold-700);
    --jade:        var(--jade-500);
    --jade-bright: var(--jade-300);
    --hair:        var(--border-subtle);
    --hair-strong: var(--border-default);
    --hair-accent: var(--accent-line);

    /* 来自 ink-atelier.css */
    --paper:        var(--surface-base);
    --paper-warm:   var(--paper-100);
    --paper-cool:   var(--paper-200);
    --paper-edge:   var(--paper-300);
    --paper-shadow: rgba(80,60,40,.06);

    --seal:      var(--seal-500);
    --seal-deep: var(--seal-700);
    --seal-soft: var(--accent-soft);
    --seal-line: var(--accent-line);

    --gold-ink:  var(--gold-500);
    --gold-soft: var(--gold-300);
    --gold-line: rgba(164,126,59,.22);

    --jade-ink:  var(--jade-500);
}

/* ============================================================================
 * 响应式字号 — 1440+ / 1920+ 大屏自动放大（5/8 用户反馈：1080p Chrome 字偏小）
 * 整体 +1 / +2 px，对外纸面感 / 灰阶不动
 * ============================================================================ */
@media (min-width: 1440px) {
    :root {
        --text-xs:      13px;
        --text-sm:      14px;
        --text-base:    15px;
        --text-md:      15px;
        --text-lg:      17px;
        --text-xl:      19px;
        --text-2xl:     22px;
        --text-3xl:     26px;
        --text-display: 36px;
    }
}

@media (min-width: 1920px) {
    :root {
        --text-xs:      14px;
        --text-sm:      15px;
        --text-base:    16px;
        --text-md:      16px;
        --text-lg:      18px;
        --text-xl:      20px;
        --text-2xl:     24px;
        --text-3xl:     28px;
        --text-display: 40px;
    }
}