/* AskDate 共享 token 层（design-review P5 定稿）
 * 全站 CSS 一律通过 var() 引用本文件；唯一允许出现字面色值（hex）的 CSS 文件。
 * 命名统一：--cream / --candy-pink / --ink（弃用原型混用的 --choco / --paper / --pink 等）。
 * 字体本地托管（依赖审计）：ZCOOL KuaiLe 自 assets/fonts/ 加载，大陆微信内 Google Fonts 不可达。
 */

/* ---- 字体 ---- */
@font-face {
  font-family: 'ZCOOL KuaiLe';
  src: url('../fonts/zcool-kuaile.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* ---- 基础重置 ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;                 /* a11y P7：正文 ≥14px */
  line-height: 1.5;
  color: var(--ink);
}

/* ---- 手机框（design-review P6）：375-420px 为交互区，>420px 居中 + 奶油底 + 角落糖果 ---- */
#app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.frame-candies {
  display: none;
}

@media (min-width: 421px) {
  .frame-candies {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .candy {
    position: absolute;
    font-size: 44px;
    line-height: 1;
    filter: drop-shadow(0 4px 10px var(--shadow-deep));
    animation: candyFloat var(--dur-float) var(--ease-inout) infinite;
  }
  .candy-1 { top: 7vh;   left: 5vw;  animation-delay: -1s; }
  .candy-2 { top: 11vh;  right: 6vw; animation-delay: -2.2s; }
  .candy-3 { bottom: 12vh; left: 7vw; animation-delay: -3s; }
  .candy-4 { bottom: 8vh;  right: 8vw; animation-delay: -0.6s; }
}

@keyframes candyFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}

/* ---- Toast（全局，各屏共用） ---- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100;
  max-width: calc(100vw - 48px);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-candy);
  font-size: 15px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
  transition: opacity var(--dur-toast) var(--ease-inout), transform var(--dur-toast) var(--ease-inout);
  box-shadow: var(--shadow-soft);
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- a11y 基线（design-review P7 硬约束） ---- */

/* 焦点环：统一糖果色描边，键盘导航全程可见 */
:focus-visible {
  outline: 3px solid var(--candy-pink);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* 减少动效：停用装饰动效（呼吸浮动/弹跳/彩带/弹入）；选中反馈、toast 等状态变化仍即时生效 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;   /* stagger 延迟不再把内容卡在 opacity:0（.card/.pill/.ticket 弹入） */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 设计 token ---- */
:root {
  /* 色板（design-review P5 定稿） */
  --cream: #FFF8EE;         /* 奶油底 */
  --candy-pink: #FF8FB1;    /* 糖果粉 */
  --butter-yellow: #FFD166; /* 奶油黄 */
  --mint: #7AE0B8;          /* 薄荷 */
  --lavender: #C9B8F0;      /* 薰衣草 */

  /* 墨色 / 描边 / 辅助色 */
  --ink: #4A3E35;                 /* 主墨色（暖棕） */
  --ink-soft: rgba(74, 62, 53, .55);
  --ink-faint: #6E5E4F;           /* 装饰小字（对奶油底 ≥4.5:1） */
  --line: #E9DEC6;                /* 稿纸横线 */
  --white: #FFFFFF;               /* 纯白 */
  --envelope-light: #FFFDF5;      /* 信封纸 */
  --yellow-soft: #FFEFC7;         /* 信封正面浅黄 */
  --candy-deep: #E2607F;          /* 深糖果粉（封蜡 / 波浪线） */
  --candy-light: #FFD7E0;         /* 浅糖果粉（高光） */
  --mint-light: #DDF3E1;          /* 浅薄荷（高光） */
  --lavender-light: #E3DCFA;      /* 浅薰衣草（向导大卡 / pill） */
  --grain: rgba(120, 100, 70, .06);   /* 牛皮纸颗粒 */

  /* 手账专属（washi 胶带，仅开场 + 片单票根借用，不扩散） */
  --tape-pink: rgba(255, 182, 200, .85);
  --tape-yellow: rgba(255, 224, 150, .85);
  --tape-blue: rgba(178, 214, 240, .85);

  /* 片单票根（movielist-H 移植）：屏内深棕「票根借用」纸 + 白色手撕票根 + 已定红章 */
  --ticket-bg: #5C4634;          /* 票根屏内深棕纸（design-review 定稿：外框仍奶油，仅屏内深棕） */
  --ticket-paper: #FFF9EF;       /* 票根纸高光 */
  --ticket-paper-deep: #FDEFD9;  /* 票根纸阴影/穿孔 */
  --ticket-ink: #5B3A22;         /* 票根主墨（标题/条码） */
  --ticket-ink-soft: #8A5A3B;    /* 票根次级墨（小字，对票根纸 ≥4.5:1） */
  --stamp-red: #D84040;          /* 「已定」红章 */
  --stamp-red-soft: rgba(216, 64, 64, .35);

  /* 密码门（lock-M 移植，result.html 专属）：糖果保险柜锁卡 */
  --lock-pink: #FF7BAC;          /* 锁卡主粉（渐变/焦点描边） */
  --lock-pink-hi: #FF8FB8;       /* 锁体渐变高光粉 */
  --lock-pink-dark: #BE285F;     /* 锁体/按钮深内阴影基色 */
  --lock-pink-soft: #FFC9DB;     /* 漂浮糖果浅粉 */
  --lock-yellow: #FFD35C;        /* 锁扣/装饰黄 */
  --lock-yellow-deep: #F5B93B;   /* 深黄（错误签内阴影） */
  --lock-card: #FFFDF8;          /* 锁卡纸白 */
  --lock-border: #FFE3EE;        /* 卡片描边 */
  --lock-ink: #7A4A3A;           /* 锁屏巧克力墨（标题） */
  --lock-ink-soft: #B9876F;      /* 副标题 */
  --lock-input-bg: #FFF1F6;      /* 软糖输入条底 */
  --lock-input-border: #FFD8E6;  /* 输入条描边 */
  --lock-placeholder: #E5A7BE;   /* 输入占位 */
  --lock-keyhole: #8A2A54;       /* 钥匙孔 */
  --lock-keyhole-shade: rgba(0, 0, 0, .4);   /* 钥匙孔内阴影 */
  --lock-err-ink: #8A5A00;       /* 错误签文字 */
  --lock-hint: #D9B49E;          /* 底部小字 */
  --lock-btn-hi: #FF95BE;        /* 按钮渐变顶色 */

  /* 结果页（results-P 移植，result.html 专属）：糖果徽章卡 */
  --result-pink: #FFE3EE;        /* 粉卡底 */
  --result-pink-deep: #FF9EC4;   /* 粉卡描边 */
  --result-mint: #DFF5E7;        /* 薄荷卡底 */
  --result-mint-deep: #7FCB9B;   /* 薄荷描边 */
  --result-lav: #EBE4FF;         /* 薰衣草卡底 */
  --result-lav-deep: #B39BE8;    /* 薰衣草描边 */
  --result-peach: #FFE8D6;       /* 蜜桃卡底 */
  --result-peach-deep: #FFB27A;  /* 蜜桃描边 */
  --result-warn: #FFE9A8;        /* 「通知未成功」警示签底 */
  --result-warn-ink: #9A6A00;    /* 警示签文字 */
  --result-warn-border: #F0C33F; /* 警示签描边 */
  --result-danger: #E4586B;      /* 清空按钮危险红 */
  --result-ink: #5B4636;         /* 结果页墨（标题/时间） */
  --result-ink-soft: #A08065;    /* 结果页次级墨 */

  /* 形状 */
  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-env: 14px;

  /* 阴影 */
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-card: 0 24px 80px rgba(74, 62, 53, .3);
  --shadow-tape: 0 2px 4px rgba(0, 0, 0, .12);
  --shadow-sticker: 3px 4px 0 rgba(0, 0, 0, .12);
  --shadow-deep: rgba(0, 0, 0, .14);
  --ink-shadow: rgba(74, 62, 53, .18);
  --candy-shadow: rgba(226, 96, 127, .3);
  --mint-shadow: rgba(78, 155, 98, .3);
  --candy-glow: rgba(255, 155, 179, .5);

  /* 老虎机滚轮（timewheel-M 移植，time-picker 屏专属） */
  --wheel-band: rgba(255, 209, 102, .25);    /* 老虎机选中带半透明黄 */
  /* 注：3 列滚轮槽用糖果深色，复用已有 --result-lav-deep(#B39BE8) / --result-mint-deep(#7FCB9B)，
     不新增 --choco-deep——深棕是票根专属（askdate-launch.md 定稿「不扩散到糖果界面」），
     深棕+金黄带赌场联想，糖果深色+白滚轮是「糖果游戏机」（抓娃娃/扭蛋）感 */

  /* 动效 */
  --dur-float: 4s;        /* 呼吸浮动 3–5s */
  --dur-env: 5s;
  --dur-seal: 3s;
  --dur-sticker: 3.2s;
  --dur-toast: .3s;
  --dur-pop: .45s;         /* 向导/片单 弹入与选中弹跳 */
  --ease-inout: ease-in-out;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* 字体 */
  --font-candy: 'ZCOOL KuaiLe', 'PingFang SC', 'system-ui', sans-serif;
  --font-body: 'PingFang SC', 'system-ui', sans-serif;
}