/*
 * 首页唯一的视觉数值来源。
 * 1. App 色阶：由 tools/sync-tokens.mjs 从 lib/design/tokens/preset_color_tokens.dart 生成。
 * 2. 语义与类别：只引用 App 色阶，映射与 lib/design/theme/category_colors.dart 一致。
 * 3. 首页版式与动效：首页自有数值，日历格几何对照 App 月历与 StickerTokens。
 * style.css 与各脚本只读取这里的变量。
 */
:root {
  /* <app-presets> 由 tools/sync-tokens.mjs 生成，请勿手改 */
  --violet-50: #f6f4fe;
  --violet-100: #eeebfc;
  --violet-200: #e0dafa;
  --violet-300: #c8bcf6;
  --violet-400: #ac96ef;
  --violet-500: #916be7;
  --violet-600: #814cdb;
  --violet-700: #713ac7;
  --violet-800: #5e30a7;
  --violet-900: #4f2989;
  --violet-950: #30185d;
  --alpha-white-50: rgb(255 255 255 / 0.051);
  --alpha-white-100: rgb(255 255 255 / 0.102);
  --alpha-white-200: rgb(255 255 255 / 0.200);
  --alpha-white-300: rgb(255 255 255 / 0.302);
  --alpha-white-400: rgb(255 255 255 / 0.400);
  --alpha-white-500: rgb(255 255 255 / 0.502);
  --alpha-white-600: rgb(255 255 255 / 0.600);
  --alpha-white-700: rgb(255 255 255 / 0.702);
  --alpha-white-800: rgb(255 255 255 / 0.800);
  --alpha-white-900: rgb(255 255 255 / 0.902);
  --alpha-white-950: rgb(255 255 255 / 0.949);
  --gray-50: #f9f9f9;
  --gray-100: #f0f0f0;
  --gray-200: #e5e5e5;
  --gray-300: #d3d3d3;
  --gray-400: #a3a3a3;
  --gray-500: #727272;
  --gray-600: #535353;
  --gray-700: #404040;
  --gray-800: #272727;
  --gray-900: #1a1a1a;
  --gray-950: #101010;
  --coffee-50: #faf7f4;
  --coffee-100: #f6f0eb;
  --coffee-200: #f0e7de;
  --coffee-300: #eaddd0;
  --coffee-400: #dbc3af;
  --coffee-500: #c9a686;
  --coffee-600: #b7885e;
  --coffee-700: #a87548;
  --coffee-800: #986232;
  --coffee-900: #88572c;
  --coffee-950: #7a4e28;
  --lime-50: #f6fbe9;
  --lime-100: #eaf5d2;
  --lime-200: #def0bc;
  --lime-300: #d3e5b3;
  --lime-400: #b2d775;
  --lime-500: #90cd32;
  --lime-600: #71a824;
  --lime-700: #669528;
  --lime-800: #597d2b;
  --lime-900: #4a652a;
  --lime-950: #395a16;
  --rose-50: #fef2f3;
  --rose-100: #fce7e8;
  --rose-200: #f9d7db;
  --rose-300: #f6c1c7;
  --rose-400: #eea0ab;
  --rose-500: #e58091;
  --rose-600: #d1617a;
  --rose-700: #d14769;
  --rose-800: #bc2f56;
  --rose-900: #91304e;
  --rose-950: #78213a;
  --sky-50: #f1f9fd;
  --sky-100: #e4f2fb;
  --sky-200: #cae7f7;
  --sky-300: #aad8ee;
  --sky-400: #7cc7e9;
  --sky-500: #54b3de;
  --sky-600: #28a2e2;
  --sky-700: #1c89c4;
  --sky-800: #1c72a0;
  --sky-900: #1f597a;
  --sky-950: #1a4766;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fedeb8;
  --orange-300: #f6c898;
  --orange-400: #f4a667;
  --orange-500: #f38f49;
  --orange-600: #e9763a;
  --orange-700: #dd602c;
  --orange-800: #c74c23;
  --orange-900: #863013;
  --orange-950: #81270e;
  --teal-50: #f2fbf9;
  --teal-100: #d2f5ee;
  --teal-200: #abede0;
  --teal-300: #97e2d7;
  --teal-400: #80d0c6;
  --teal-500: #29a396;
  --teal-600: #21978c;
  --teal-700: #238079;
  --teal-800: #236762;
  --teal-900: #1d4442;
  --teal-950: #092a29;
  /* </app-presets> */
  --base-white: #ffffff; /* 对照 App BaseColorTokens.white（邮票纸面、叠字） */

  /* ---- 语义色（对照 App 浅色主题与 HomeCalendarTokens） ---- */
  --page-bg: var(--gray-100);
  --card-surface: var(--gray-50);
  --ink: var(--gray-950);
  --ink-soft: var(--gray-600);
  --ink-muted: var(--gray-500);
  --ink-faint: var(--gray-400);
  --idle-cell: var(--gray-100);
  --year-idle-cell: var(--gray-200);
  --year-label: var(--gray-500);
  --day-number: var(--gray-400);
  --on-badge: var(--gray-50);
  --rule: var(--gray-300);
  --rule-soft: var(--gray-200);
  --veil: var(--card-surface);
  --accent-dark: var(--gray-900);
  --on-dark: var(--gray-50);
  --on-dark-muted: var(--gray-400);
  --focus: var(--gray-950);
  --status-on: var(--lime-700);

  /* 深灰控制条渐变（导航，对照 App 日历控制条 headerGradientStart/End） */
  --bar-start: var(--gray-600);
  --bar-end: var(--gray-700);
  --bar-ink: var(--gray-50);
  --bar-highlight: var(--alpha-white-200);

  /* 深色展台（里程碑） */
  --showcase-bg: var(--gray-900);
  --showcase-ink: var(--gray-50);
  --showcase-muted: var(--gray-400);
  --showcase-rule: var(--alpha-white-100);

  /* ---- 类别色：日期格 400，角标 700 ---- */
  --cat-coffee-400: var(--coffee-400);
  --cat-coffee-700: var(--coffee-700);
  --cat-tea-400: var(--lime-400);
  --cat-tea-700: var(--lime-700);
  --cat-water-400: var(--sky-400);
  --cat-water-700: var(--sky-700);
  --cat-drink-400: var(--teal-400);
  --cat-drink-700: var(--teal-700);
  --cat-juice-400: var(--orange-400);
  --cat-juice-700: var(--orange-700);
  --cat-alcohol-400: var(--rose-400);
  --cat-alcohol-700: var(--rose-700);
  --cat-other-400: var(--violet-400);
  --cat-other-700: var(--violet-700);

  /* ---- 字体 ---- */
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --font-sans: 'Inter', system-ui, -apple-system, 'PingFang SC', sans-serif;
  --font-stamp: 'Otomanopee One', var(--font-sans); /* 里程碑票面叠字 */
  --font-receipt: 'Courier Prime', var(--font-mono);

  /* ---- 字号（clamp 让手机到大屏连续变化） ---- */
  --type-hero: clamp(40px, 6.4vw, 92px);
  --type-hero-leading: 1.12;
  --type-title: clamp(30px, 4.2vw, 58px);
  --type-title-leading: 1.2;
  --type-step: clamp(22px, 2vw, 28px);
  --type-lead: clamp(16px, 1.3vw, 18px);
  --type-body: 15px;
  --type-small: 13px;
  --type-label: 12px;
  --type-counter: clamp(26px, 2.6vw, 38px);
  --leading-body: 1.75;
  --tracking-label: 0.14em;
  --tracking-title: -0.01em;

  /* ---- 间距与形状 ---- */
  --gutter: clamp(16px, 4vw, 48px);
  --content-max: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-section: clamp(96px, 14vw, 180px);
  --radius: 8px;
  --radius-card: 20px;
  --radius-panel: 32px;
  --radius-pill: 999px;
  --rule-width: 1px;
  --dash: 6px; /* 纯本地虚线框的虚线长度 */

  /* ---- 阴影（卡片对照 HomeCalendarTokens 双层投影；贴纸对照 StickerTokens） ---- */
  --shadow-card: 0 2px 2px rgb(16 16 16 / 0.03), 0 8px 8px rgb(16 16 16 / 0.05);
  --shadow-raised: 0 2px 4px rgb(16 16 16 / 0.05), 0 18px 40px rgb(16 16 16 / 0.1);
  --shadow-sticker: drop-shadow(0 2px 6px rgb(16 16 16 / 0.05)) drop-shadow(0 4px 13px rgb(16 16 16 / 0.1));
  --shadow-stamp: drop-shadow(0 2px 2px rgb(16 16 16 / 0.12)) drop-shadow(0 5px 7px rgb(16 16 16 / 0.08));
  --shadow-ink-far: rgb(16 16 16 / 0.1); /* 画布中开场贴纸的投影色 */

  /* ---- 导航 ---- */
  --nav-top: var(--space-4);
  --nav-height: 48px;
  --nav-pad: 6px;

  /* ---- 首屏手机（代码绘制） ---- */
  --phone-width: clamp(250px, 23vw, 330px);
  --phone-ratio: 0.486; /* 宽 / 高，接近 19.5:9 */
  --phone-bezel: 10px;
  --phone-radius: 46px;
  --phone-screen-radius: 37px;
  --phone-frame: var(--gray-900);
  --phone-screen: var(--gray-200); /* App 页面背景 */
  --phone-scale: calc(var(--phone-width) / 330px); /* 屏内元素随机身等比 */
  --float-size: calc(var(--phone-width) * 0.6); /* 手机背后伸出的大贴纸 */
  /* 布局照用户在设计画板中的调整（2026-10-03）：左侧 A、B，右侧 C、E、D，全部在手机后层；
     叠放顺序见 index.html（越靠后越在上层）。
     x：贴纸中心相对手机中线的偏移（机身宽度倍数）；y：贴纸中心距机身顶部（机身高度比例） */
  --float-spread: 1; /* 横向收拢系数 */
  --float-spread-narrow: 0.72; /* 手机布局 */
  --float-size-narrow: 0.46;
  --float-a-x: -1.467;
  --float-a-y: 0.305;
  --float-b-x: -0.909;
  --float-b-y: 0.429;
  --float-c-x: 1.618;
  --float-c-y: 0.303;
  --float-e-x: 0.812;
  --float-e-y: 0.253;
  --float-d-x: 0.994;
  --float-d-y: 0.474;

  /* ---- 功能卡片 ---- */
  --feature-min: 300px;
  --feature-art-height: 168px;
  --tag-height: 36px; /* 对照 CategoryTagTokens */
  --tag-pad-x: 12px;

  /* ---- 里程碑邮票（对照 MilestoneTokens：160×206.67 纸面，内缩 10，画面 3:4） ---- */
  --stamp-width: clamp(132px, 13vw, 176px);
  --stamp-ratio: 0.7742; /* 160 / 206.67 */
  --stamp-inset: calc(var(--stamp-width) * 10 / 160);
  --stamp-art-radius: calc(var(--stamp-width) * 8 / 160);
  --stamp-overlay-inset: calc(var(--stamp-width) * 8 / 160);
  --stamp-title-size: calc(var(--stamp-width) * 12 / 160);
  --stamp-number-size: calc(var(--stamp-width) * 40 / 160);
  --stamp-number-size-3: calc(var(--stamp-width) * 34 / 160);
  --stamp-unit-size: calc(var(--stamp-width) * 12 / 160);
  --stamp-gray: grayscale(1);
  --stamp-tilt: 2deg;
  --stamp-flip: 600ms;
  --stamp-color-in: 520ms;
  --stamp-color-step: 70ms;

  /* ---- 纯本地：状态胶囊跑马灯 ---- */
  --chip-height: 40px;
  --marquee-duration: 48s;

  /* ---- 细部尺寸（style.css 中所有固定尺寸都从这里读取） ---- */
  --focus-ring: 2px;
  --focus-offset: 3px;
  --focus-offset-tight: 2px;
  --measure-head: 780px;
  --measure-hero: 860px;
  --measure-faq: 900px;
  --store-min: 248px;
  --dot: 6px;
  --dot-small: 5px;
  --steps-min: 260px;
  --note-badge: 20px;
  --note-badge-font: 11px;
  --note-ring: 3px;
  --tag-label-size: 11px;
  --tag-label-height: 24px;
  --tag-font: 14px;
  --tag-line: 20px;
  --tag-selected-border: 1.5px; /* 对照 CategoryTagTokens.selectedBorderWidth */
  --art-photo-w: 84px;
  --art-photo-h: 108px;
  --art-icon: 28px;
  --art-arrow-w: 36px;
  --art-arrow-stroke: 2px;
  --art-arrow-head: 8px;
  --art-sticker: 112px;
  --mini-cell-ratio: 6 / 7;
  --mini-gap: 2px;
  --mini-radius: 1.5px;
  --paper-radius: 4px;
  --stamp-perspective: 900px;
  --fact-min: 220px;
  --footer-bg: var(--gray-800); /* 页脚深灰底（App 墨色），与深色里程碑展台呼应 */
  --footer-ink: var(--gray-50);
  --footer-muted: var(--gray-400);
  --footer-rule: var(--alpha-white-100);
  --footer-wordmark-size: 14.4cqi; /* 英文名字号按页脚内容宽度缩放，正好撑满一行 */
  --footer-wordmark-leading: 1;
  --footer-wordmark-tracking: -0.035em;
  --footer-wordmark-sink: 0.12em; /* 英文名下沉，压进屏幕底部的渐变模糊带 */
  --faq-icon: 14px;
  --faq-open: 320; /* ms，常见问题展开与收起 */
  --lang-option-w: 36px; /* 中／EN 切换每一格的宽度 */
  --lang-inset: 3px; /* 滑块与外框的间距 */
  --lang-slide: 320ms; /* 滑块移动时长 */
  --jump-out: 200; /* ms，点页内链接时正文淡出 */
  --jump-in: 420; /* ms，到达目的地后正文淡入 */
  --faq-icon-stroke: 2px;
  --edge-blur-top: 128px; /* 屏幕顶部渐变模糊带的高度 */
  --edge-blur-bottom: 104px; /* 屏幕底部渐变模糊带的高度 */
  --edge-blur-max: 8px; /* 最靠边一层的模糊半径；往内每层减半，叠加后模糊程度由边缘向内渐弱 */
  --logo-nav: 26px; /* 导航中的 Logo 图形（白色邮票＋咖啡杯） */
  --app-icon-closing: 96px; /* 收尾下载区的完整 App 图标 */
  --logo-footer: 32px; /* 页脚品牌前的 Logo 图形（深色底上不带底色） */

  /* 隐私政策页：单栏阅读版式 */
  --legal-max: 720px;
  --legal-title: clamp(28px, 3.6vw, 44px);
  --legal-heading: 18px;
  --footer-brand-size: 20px;
  --app-icon-radius: 22.37%; /* 与 iOS 图标圆角比例一致 */
  --hero-stage-visible: 0.673; /* 首屏手机露出的高度比例 */
  --hero-stage-fade: 86%;
  --hero-glow-opacity: 0.9;
  --hero-glow-top: 30%; /* 色晕从标题下方开始铺开 */
  --hero-glow-w: 1700px;
  --hero-glow-edge: 22%; /* 色晕上下两端的淡出范围 */
  --hero-glow-fade: 3200ms; /* 两种颜色之间的渐变时长 */
  --hero-glow-interval: 3600; /* ms，换色间隔 */
  --chips-fade: 12%;
  --veil-solid: 68%;

  /* ---- 装饰倾角 ---- */
  --tilt-photo: -4deg;
  --tilt-sticker: 5deg;
  --tilt-float-a: -8deg;
  --tilt-float-b: 13deg;
  --tilt-float-c: -13deg;
  --tilt-float-e: 12deg;
  --tilt-float-d: -11deg;
  --flip-angle: 180deg;
  --quarter-turn: 45deg;

  /* 断点（CSS 媒体查询不能读取变量，数值同步写在 style.css 与 main.js）：
     900px 或竖屏 → 叙事改单栏；760px → 手机布局 */

  /* ---- 类别色补充：分类 Tag 选中态 200／500／800、徽章图标 100（对照 CategoryTag） ---- */
  --cat-coffee-100: var(--coffee-100);
  --cat-coffee-200: var(--coffee-200);
  --cat-coffee-500: var(--coffee-500);
  --cat-coffee-800: var(--coffee-800);
  --cat-tea-100: var(--lime-100);
  --cat-tea-200: var(--lime-200);
  --cat-tea-500: var(--lime-500);
  --cat-tea-800: var(--lime-800);
  --cat-water-100: var(--sky-100);
  --cat-water-200: var(--sky-200);
  --cat-water-500: var(--sky-500);
  --cat-water-800: var(--sky-800);
  --cat-drink-100: var(--teal-100);
  --cat-drink-200: var(--teal-200);
  --cat-drink-500: var(--teal-500);
  --cat-drink-800: var(--teal-800);
  --cat-juice-100: var(--orange-100);
  --cat-juice-200: var(--orange-200);
  --cat-juice-500: var(--orange-500);
  --cat-juice-800: var(--orange-800);
  --cat-alcohol-100: var(--rose-100);
  --cat-alcohol-200: var(--rose-200);
  --cat-alcohol-500: var(--rose-500);
  --cat-alcohol-800: var(--rose-800);
  --cat-other-100: var(--violet-100);
  --cat-other-200: var(--violet-200);
  --cat-other-500: var(--violet-500);
  --cat-other-800: var(--violet-800);

  /* ---- 分类 Tag（对照 CategoryTagTokens 与 docs/components/category-tag.md） ---- */
  --tag-surface: var(--alpha-white-950);
  --tag-border-idle: var(--gray-100);
  --tag-ink-idle: var(--gray-400);
  --tag-gap: 24px; /* AddDrinkTrayTokens.categoryTagGap */
  --badge-anchor: 26px;
  --badge-size: 24px;
  --badge-radius: 4px;
  --badge-border: 2px;
  --badge-icon: 16px;
  --badge-offset: 18.5px;
  --badge-rotate: 5deg;
  --badge-ring: var(--alpha-white-950);
  --shadow-object: 0 2px 2px rgb(16 16 16 / 0.05), 0 2px 8px rgb(16 16 16 / 0.05);

  /* ---- 统计小票：App 原尺寸（对照 StatisticsTokens、AppStampTagTokens），整体缩放放进卡片 ---- */
  --stat-zoom: 0.82;
  --stat-zoom-narrow: 0.72;
  --stat-art-height: 360px;
  --stat-art-fade: 72%;
  --stat-dispenser-width: 377px;
  --stat-dispenser-height: 71px;
  --stat-dispenser-pad: 12px;
  --stat-dispenser-radius: 12px;
  --stat-dispenser-start: var(--gray-500);
  --stat-dispenser-end: var(--gray-700);
  --stat-dispenser-edge: var(--alpha-white-100);
  --stat-dispenser-shadow: 0 6px 6px rgb(16 16 16 / 0.4), 0 12px 13px rgb(16 16 16 / 0.15);
  --stat-head-height: 24px;
  --stat-month-left: 8px;
  --stat-month-gap: 9px;
  --stat-lamp-w: 6px;
  --stat-lamp-h: 12px;
  --stat-lamp: var(--lime-500);
  --stat-lamp-glow: 0 0 8px rgb(144 205 50 / 0.65);
  --stat-lamp-printing: var(--orange-400);
  --stat-lamp-printing-glow: 0 0 8px rgb(244 166 103 / 0.65);
  --stat-lamp-fade: 140ms; /* printerStatusTransitionDuration */
  --stat-warm-up: 160; /* ms，printerWarmUpDuration */
  --stat-feed-speed: 420; /* px/s，receiptFeedPixelsPerSecond */
  --stat-stamp-land: 350ms; /* rankStampLandingDuration */
  --stamp-land-scale: 2.2; /* AppStampLandingMotionTokens */
  --stamp-land-rotate: -6.9deg; /* startRotation -0.12rad，叠加在最终 -10° 上 */
  --stamp-land-offset: -24px;
  --stat-month-ink: var(--gray-200);
  --stat-month-font: 500 14px / 20px var(--font-mono);
  --stat-control-size: 24px;
  --stat-control-gap: 7px;
  --stat-control-radius: 4px;
  --stat-control-icon: 16px;
  --stat-control-start: var(--gray-600);
  --stat-control-end: var(--gray-700);
  --stat-control-shadow: 0 1px 1px rgb(16 16 16 / 0.1), 0 2px 4px rgb(16 16 16 / 0.15);
  --stat-slot-top: 43px;
  --stat-slot-height: 16px;
  --stat-slot-radius: 4px;
  --stat-slot: var(--gray-900);
  --stat-paper-overlap: 20px; /* 纸从出纸口中线（43 + 16/2 = 51px）处出来，盖住吐票口前缘 */
  --stat-paper-shadow: drop-shadow(0 2px 2px rgb(16 16 16 / 0.03)) drop-shadow(0 8px 8px rgb(16 16 16 / 0.05)); /* ShadowTokens.card */
  --stat-paper-shadow-room: 12px; /* 出票窗口给纸张投影留的余量 */
  --stat-exit-shadow-height: 16px;
  --stat-exit-shadow: rgb(16 16 16 / 0.9);
  --stat-paper-width: 336px;
  --stat-paper: var(--gray-50);
  --stat-paper-pad-y: 16px;
  --stat-content-width: 300px;
  --stat-ink: var(--gray-800);
  --stat-font: 400 14px / 16px var(--font-mono), var(--font-sans);
  --stat-font-en: 400 14px / 16px var(--font-receipt); /* App 英文小票用 Courier Prime */
  --stat-tracking: -0.12px;
  --stat-section-gap: 3px;
  --stat-left-col: 180px;
  --stat-right-col: 120px;
  --stat-label-indent: 38px;
  --stat-row-height: 24px;
  --stat-row-gap: 8px;
  --stat-row-gap-dense: 4px;
  --stat-badge-gap: 12px;
  --stat-tile-size: 24px;
  --stat-tile-radius: 4px;
  --stat-tile-icon: 16px;
  --stat-nutri-label: 70px;
  --stat-barcode-width: 275px;
  --stat-barcode-height: 32px;
  --stat-code-font: 400 12px / 16px var(--font-mono);
  --stat-tear-height: 12px;
  --stamp-tag-ink: var(--rose-700);
  --stamp-tag-font: 700 12px / 16px var(--font-receipt);
  --stamp-tag-tracking: 2px;
  --stamp-tag-outer: 2px;
  --stamp-tag-outer-radius: 4px;
  --stamp-tag-outer-pad: 2px;
  --stamp-tag-inner: 1px;
  --stamp-tag-inner-radius: 2px;
  --stamp-tag-inner-pad: 4px;
  --stamp-tag-tilt: -10deg;
  --stamp-tag-top: -2px;
  --nutri-kcal-bg: var(--lime-100);
  --nutri-kcal-ink: var(--lime-400);
  --nutri-sugar-bg: var(--sky-100);
  --nutri-sugar-ink: var(--sky-400);
  --nutri-caffeine-bg: var(--coffee-100);
  --nutri-caffeine-ink: var(--coffee-400);

  /* ---- 营养罐（对照 AddDrinkTrayTokens） ---- */
  --tray-small-font: 14px / 20px var(--font-sans);
  --tray-ink: var(--gray-800);
  --tray-muted: var(--gray-400);
  --jar-w: 81px;
  --jar-h: 123px;
  --jar-label-gap: 16px;
  --jar-item-size: 24px;
  --nutri-kcal-jar: var(--lime-100);
  --nutri-sugar-jar: var(--sky-100);
  --nutri-caffeine-jar: var(--coffee-100);

  /* ---- 摇一摇：饮品邮票横向滚轮（对照 App 推荐滚轮与 docs/prd/shake-recommendation.md） ---- */
  --reel-stamp-ratio: 0.46; /* 邮票宽 / 屏幕宽：App 181.44 / 393 */
  --reel-ref-width: 181.44; /* App 邮票外宽，以下参考值按它换算 */
  --reel-ref-gap: 64; /* 圆柱半径 =（票宽 + 64 纸边留白）÷ 40° */
  --reel-ref-perspective: 1000; /* App 透视 0.001 */
  --reel-angle: 40; /* 度 */
  --reel-min-alpha: 0.35; /* 侧面邮票按转角变淡的下限 */
  --reel-edge-fade: 15; /* 度：圆柱可见边缘前的淡出范围 */
  --reel-lead-extra: 16; /* 首轮领头邮票距屏幕右缘外的余量 */
  --reel-spin: 2800; /* ms，一次转动 */
  --reel-fade: 300; /* ms，两侧邮票淡入淡出 */
  --reel-hold: 1800; /* ms，停下后的停留 */
  --reel-steps-min: 12;
  --reel-steps-max: 16; /* App 标准切换 16 张 */
  --pstamp-shadow: drop-shadow(0 6px 10px rgb(16 16 16 / 0.12)) drop-shadow(0 1px 2px rgb(16 16 16 / 0.1)); /* 白卡上比 App 遮罩背景的 5% 投影更明显 */

  /* ---- 纯本地：状态标签三色 ---- */
  --chip-no-bg: var(--lime-100); /* 绿：不需要／没有 */
  --chip-no-ink: var(--lime-800);
  --chip-no-dot: var(--lime-600);
  --chip-safe-bg: var(--sky-100); /* 蓝：有保护 */
  --chip-safe-ink: var(--sky-800);
  --chip-safe-dot: var(--sky-600);
  --chip-choice-bg: var(--orange-100); /* 黄：由你选择（App 色阶无黄色，用最接近的 Orange） */
  --chip-choice-ink: var(--orange-800);
  --chip-choice-dot: var(--orange-500);
  --chips-pad: 14px; /* 上下留白，避免标签阴影被遮罩裁掉 */

  /* ---- 里程碑横向滚动 ---- */
  --rail-duration: 90s;
  --rail-gap: var(--space-10);
  --original-long-edge: calc(var(--stamp-width) / var(--stamp-ratio)); /* 原作最长边 = 邮票高 */
  --original-border: calc(var(--stamp-inset) * 0.75); /* 白边比 App 原作卡细 25%（用户 2026-10-03） */
  --original-radius: 2px;
  --caption-fade: 320ms;
  --caption-overlap: 100ms; /* 旧文字开始淡出 100ms 后新文字淡入，两层有一段重叠 */

  /* ---- 日历几何（世界坐标，单位与 App 逻辑像素一致） ---- */
  --cal-cell-w: 40;
  --cal-cell-h: 48;
  --cal-gap: 6;
  --cal-radius: 8;
  --cal-sticker-w: 32;
  --cal-sticker-h: 40;
  --cal-day-font: 14;
  --cal-badge-h: 16;
  --cal-badge-font: 11;
  --cal-badge-overflow: 4;
  --cal-month-title-h: 34;
  --cal-month-title-font: 15;
  --cal-month-gap-x: 44;
  --cal-month-gap-y: 30;
  --cal-sticker-fade-from: 48; /* 屏幕上格高小于此值时贴纸开始淡出 */
  --cal-sticker-fade-to: 36; /* 小于此值贴纸完全隐去，只留类别色 */
  --cal-number-min: 36; /* 屏幕格高小于此值不画日期数字 */
  --cal-number-fade: 10;
  --cal-title-min: 5; /* 月份标题屏幕字号小于此值隐去 */
  --cal-badge-pad-x: 4;

  /* ---- 叙事滚动 ---- */
  --story-length: 320vh; /* 招牌段总滚动长度（约 2.2 屏） */
  --story-visual-h: min(68svh, 600px); /* 桌面右侧画布卡片高度 */

  /* ---- 开场那一杯 ---- */
  --hero-sticker-vmin: 0.22;
  --hero-sticker-min: 120;
  --hero-sticker-max: 220;
  --hero-y: 0.5; /* 浮动位置：画布高度比例 */
  --hero-tilt: -8; /* 度 */
  --hero-shadow-blur: 26;
  --hero-shadow-y: 8;
  --hero-landed-shadow-blur: 4;
  --hero-landed-shadow-y: 2;

  /* ---- 镜头取景：中心与可用区域均为画布比例 ---- */
  --frame-day-y: 0.46;
  --frame-day-w: 0.5;
  --frame-day-h: 0.3;
  --frame-week-y: 0.46;
  --frame-week-h: 0.24;
  --frame-month-y: 0.46;
  --frame-month-h: 0.62;
  --frame-year-y: 0.5;
  --frame-year-h: 0.78;
  --frame-pad: 0.06; /* 画布四周留白：短边比例 */
  --frame-narrow-caption: 0.3; /* 窄屏：画布底部留给字幕的比例 */
  --frame-columns-portrait: 0.8; /* 宽高比低于此值时年历改为 3 列 */

  /* ---- 动效（对照 App 贴纸揭示与 M3 Standard） ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dur-fast: 200ms;
  --dur-fade: 320ms;
  --dur-text: 560ms;
  --reveal-duration: 525; /* ms，App recordedRevealBaseDuration 350ms × 1.5 */
  --reveal-overshoot: 1.2;
  --reveal-overshoot-at: 0.72;
  --reveal-rotation: 15;
  --reveal-row-min: 55;
  --reveal-row-max: 75;
  --reveal-newrow-min: 90;
  --reveal-newrow-max: 120;
  --reveal-year-step: 4; /* 年视图铺色的逐格间隔（ms），安静 */
  --reveal-hide: 200; /* ms，倒退时贴纸淡出 */
  --float-amplitude: 8; /* 开场贴纸浮动幅度（px） */
  --float-period: 3200; /* ms */
  --camera-smoothing: 0.14; /* 镜头追随滚动的平滑系数 */
  --scroll-lerp: 0.1; /* 平滑滚动：每帧追上目标位置的比例，越小越顺滑、拖尾越长 */
  --scroll-wheel: 1; /* 平滑滚动：滚轮一格的距离倍数 */
  --hero-reveal-delay: 500ms; /* 首屏手机贴纸开始揭示前的停顿 */
  --sticker-float: 7s;
}

/* 首屏色晕：注册为颜色类型才能平滑过渡；初始值对应 coffee/sky/lime 200 */
@property --glow-a {
  syntax: '<color>';
  inherits: true;
  initial-value: #f0e7de;
}
@property --glow-b {
  syntax: '<color>';
  inherits: true;
  initial-value: #cae7f7;
}
@property --glow-c {
  syntax: '<color>';
  inherits: true;
  initial-value: #def0bc;
}