/* ==========================================================================
   w23x.com design tokens — single source of truth
   ==========================================================================
   所有颜色、字号、间距都定义在这里。styles.css 只引用，不自己定值。
   改样式先改这个文件；不要在 styles.css 里直接写死颜色值。
   ========================================================================== */

:root {
    /* --- Ink & paper -------------------------------------------------- */
    --w-paper: #fcfcfa;
    --w-paper-sunk: #f4f4f1;
    --w-ink: #16181a;
    --w-ink-muted: #6b7075;
    --w-ink-faint: #9aa0a6;
    --w-rule: #dcdcd7;

    /* Accent: instrument blue. Used for state, never for decoration. */
    --w-accent: #1f4fd8;
    --w-accent-ink: #ffffff;

    /* --- Type -------------------------------------------------------- */
    /* System stacks: zero network cost, correct CJK on macOS and Windows.
       Swap in a licensed grotesque here and it applies everywhere. */
    --w-font-sans:
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --w-font-mono:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --w-size-micro: 0.6875rem;
    --w-size-small: clamp(0.75rem, calc(0.72rem + 0.15vw), 0.8125rem);
    --w-size-body: clamp(0.9375rem, calc(0.9rem + 0.19vw), 1.0625rem);
    /* 巨型字号：字面本身当作图形元素用。上限刻意压住，
       让 "w23x" 四个字符在 66ch 的版心里撑满但不溢出。 */
    --w-size-display: clamp(3.5rem, 15vw, 8.5rem);
    --w-size-lead: clamp(1.0625rem, calc(1rem + 0.31vw), 1.25rem);

    --w-leading-tight: 1.3;
    --w-leading-body: 1.62;
    --w-tracking-label: 0.09em;

    /* --- Space ------------------------------------------------------- */
    /* Vertical rhythm keys off viewport height so short screens stay dense. */
    --w-space-2xs: 0.25rem;
    --w-space-xs: 0.5rem;
    --w-space-sm: 0.75rem;
    --w-space-md: clamp(1rem, 2.4vh, 1.5rem);
    --w-space-lg: clamp(1.75rem, 4.5vh, 2.75rem);
    --w-space-xl: clamp(2.5rem, 7vh, 4rem);

    /* --- Structure --------------------------------------------------- */
    --w-measure: 66ch;
    --w-hairline: 1px;
    --w-radius: 0;
    --w-focus-width: 2px;
    --w-focus-offset: 3px;
    /* WCAG 2.2 target size (minimum) is 24x24 CSS px. Small mono labels need
       padding to reach it — they must not be sized down past this. */
    /* max(), not a bare rem: the root font-size is a clamp() that shrinks on
       narrow screens, which would pull a rem-based target under 24px there. */
    --w-target-min: max(24px, 1.5rem);
    --w-target-pad: 0.5rem;

    /* --- 图纸元素 ------------------------------------------------------ */
    /* 底层栅格：模仿掩模版的对准网格。要极淡，比 rule 还淡，
       淡到不看它时不存在，看它时才浮出来。 */
    --w-lattice-ink: rgba(22, 24, 26, 0.055);
    --w-lattice-size: 5.5rem;
    --w-mark-size: 0.75rem; /* 四角对准十字的臂长 */
    --w-mark-ink: #c8c8c2;

    /* --- 动效 ---------------------------------------------------------- */
    --w-enter-dur: 620ms;
    --w-enter-step: 70ms; /* 每个区块的入场间隔 */
    --w-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --w-paper: #101214;
        --w-paper-sunk: #171a1d;
        --w-ink: #e8e8e4;
        --w-ink-muted: #9198a0;
        --w-ink-faint: #6a7178;
        --w-rule: #2a2e33;
        --w-accent: #7da2ff;
        --w-accent-ink: #0d0f11;
        /* 深色下栅格要用亮色描线，否则在深底上是隐形的 */
        --w-lattice-ink: rgba(232, 232, 228, 0.05);
        --w-mark-ink: #3a4046;
    }
}