/**
 * @file tokens.css
 * @brief 静水名片的视觉设计令牌。
 */

:root {
    color-scheme: light;

    --color-paper: oklch(96% 0.012 105);
    --color-ink: oklch(29% 0.014 100);
    --color-ink-caption: oklch(32% 0.018 105);
    --color-ink-muted: oklch(43% 0.018 110);
    --color-ink-subtle: oklch(50% 0.015 110);
    --color-accent: oklch(55% 0.09 150);
    --color-accent-ink: oklch(98% 0.008 105);
    --color-rule: oklch(78% 0.012 110);
    --color-rule-soft: oklch(84% 0.01 110);
    --color-focus: oklch(47% 0.11 150);
    --color-error: oklch(46% 0.14 28);
    --color-paper-soft: oklch(94% 0.016 112);
    --color-paper-clear: oklch(96% 0.012 105 / 0%);
    --color-paper-wash: oklch(98% 0.008 105 / 72%);
    --color-selection: oklch(76% 0.06 150 / 42%);
    --color-veil-top: oklch(98% 0.008 105 / 74%);
    --color-veil-bottom: oklch(98% 0.008 105 / 64%);
    --color-veil-clear: oklch(98% 0.008 105 / 0%);
    --color-collection-accent: oklch(64% 0.065 88);
    --color-collection-focus: oklch(43% 0.065 88);
    --color-collection-rule: oklch(72% 0.018 96);
    --color-collection-rule-soft: oklch(88% 0.012 100);
    --color-collection-lustre: oklch(98% 0.014 96 / 58%);
    --color-lily-pearl: oklch(98% 0.009 105);
    --color-lily-shell: oklch(92% 0.018 108);
    --color-lily-mist: oklch(87% 0.026 215);
    --color-lily-sage-soft: oklch(83% 0.038 153);
    --color-lily-sage: oklch(70% 0.052 159);
    --color-lily-depth: oklch(46% 0.028 168);
    --color-lily-line: oklch(60% 0.028 168);
    --color-lily-glint: oklch(99% 0.006 102);
    --color-lily-throat-soft: oklch(92% 0.052 96);
    --color-lily-gold: oklch(75% 0.11 82);
    --color-lily-gold-light: oklch(88% 0.095 90);
    --color-lily-gold-deep: oklch(66% 0.105 76);
    --color-lily-optic: oklch(73% 0.06 230);
    --color-lily-waterline: oklch(67% 0.032 190);
    --color-lily-shadow: oklch(36% 0.025 180);

    --font-site: 'Maple Mono NL CN', 'Maple Mono NL CN Extended', 'Noto Sans SC Fallback', 'Microsoft YaHei UI', 'PingFang SC', system-ui, sans-serif;
    --font-display: var(--font-site);
    --font-body: var(--font-site);

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
    --page-gutter-start: max(var(--page-gutter), env(safe-area-inset-left));
    --page-gutter-end: max(var(--page-gutter), env(safe-area-inset-right));
    --content-max: 82rem;
    --motto-space-end: clamp(2.5rem, 7svh, 4rem);
    --motto-space-end-wide: clamp(3rem, 8svh, 5rem);
    /**
     * @brief 让水莲可见主体略窄于左侧短语，使其退居为右下方的环境装饰。
     */
    --lily-size-compact: clamp(9.5rem, calc(8.9rem + 2.4vw), 10.125rem);
    --lily-size-wide: clamp(10rem, calc(8.9rem + 2.4vw), 11.25rem);
    --lily-size-landscape: 8.3125rem;
    --lily-size-extreme: 8.3125rem;
    /**
     * @brief 低矮桌面沿用常规装饰比例；更短视口由组件与题记字号同步切换。
     */
    --lily-size-desktop-low: var(--lily-size-wide);
    /**
     * @brief 窄屏与宽屏共用底部锚点，避免跨越宽度断点时水莲向上跳动。
     */
    --lily-inset-block-wide: var(--space-xl);
    --lily-inset-block-compact: var(--lily-inset-block-wide);
    --lily-inset-block-desktop-low: clamp(
        var(--space-sm),
        calc(100svh - 21.25rem),
        var(--lily-inset-block-wide)
    );
    --lily-anchor-block-landscape: 44.5%;
    /**
     * @brief 按缩小后的 SVG 透明边界校准右侧留白，使可见轮廓与页面网格对齐。
     */
    --lily-edge-compensation-compact: 1rem;
    --lily-edge-compensation-wide: clamp(1rem, calc(0.9rem + 0.25vw), 1.25rem);
    --lily-edge-compensation-landscape: 0.875rem;
    /**
     * @brief 按短屏水莲的右侧透明边界补偿视觉落点，并平滑衔接常规桌面值。
     */
    --lily-edge-compensation-desktop-low: var(--lily-edge-compensation-wide);
    --lily-edge-compensation-extreme: 0.875rem;
    --lily-edge-compensation-ultrawide: clamp(1rem, calc(0.9rem + 0.25vw), 1.25rem);
    --focus-offset: 0.25rem;
    --link-underline-offset: -0.125rem;
    --tracking-identity: 0.015em;
    --tracking-link: 0.04em;
    --tracking-caption: 0.04em;
    --tracking-footer: 0.035em;
    --tracking-time: 0.08em;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5625rem;
    --text-title: clamp(2.25rem, 5vw, 4.25rem);
    --text-caption: clamp(1rem, 0.9375rem + 0.25vw, 1.1875rem);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-short: 120ms;
    --dur-medium: 220ms;
    --dur-lily-settle: 420ms;
    --dur-lily-bloom: 640ms;

    --rule-hairline: 1px;
    --shadow-collection-lustre: 0 1px 2px oklch(30% 0.014 96 / 5%);
    --radius-lustre: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;

    --layer-background: 0;
    --layer-atmosphere: 1;
    --layer-content: 2;
}