/* ============================================================
   tokens.css — 护妍 (Beauty Guardian) v4.0 「L'Atelier」
   设计语言：法式高定美妆编辑风 (L'Oréal Luxe Editorial)
   降噪奶油金 · 发丝线 · 大写宽字距 · 电影感节奏
   ============================================================ */

:root {
  /* ═══════════ 表面 · Ivory Atelier ═══════════ */
  --bg-app: #F6F1E9;
  --bg-subtle: #EFE8DC;
  --bg-card: #FCFAF5;
  --bg-card-hi: #FFFEFA;
  --bg-ink: #16120C;
  --bg-ink-soft: #221C13;
  --bg-veil: rgba(246, 241, 233, 0.92);

  /* ═══════════ 墨色 · Warm Ink Scale ═══════════ */
  --ink: #16120C;
  --ink-2: #453D31;
  --ink-3: #7C7263;
  --ink-4: #AFA493;
  --on-ink: #F3EDE2;
  --on-ink-2: rgba(243, 237, 226, 0.62);

  /* ═══════════ 金 · Champagne Restraint ═══════════ */
  --gold: #A88C55;
  --gold-deep: #8A7140;
  --gold-line: rgba(168, 140, 85, 0.45);
  --gold-soft: rgba(168, 140, 85, 0.12);
  --gold-glow: rgba(168, 140, 85, 0.22);

  /* ═══════════ 发丝线 · Hairlines ═══════════ */
  --line: rgba(22, 18, 12, 0.14);
  --line-soft: rgba(22, 18, 12, 0.07);
  --line-faint: rgba(22, 18, 12, 0.045);

  /* ═══════════ 取证语义 · Desaturated Forensic ═══════════ */
  --safe: #47795D;
  --safe-bg: rgba(71, 121, 93, 0.08);
  --safe-line: rgba(71, 121, 93, 0.32);

  --warn: #A2701F;
  --warn-bg: rgba(162, 112, 31, 0.08);
  --warn-line: rgba(162, 112, 31, 0.32);

  --danger: #A8402F;
  --danger-bg: rgba(168, 64, 47, 0.07);
  --danger-line: rgba(168, 64, 47, 0.32);

  --ai: #7C5494;
  --ai-bg: rgba(124, 84, 148, 0.07);
  --ai-line: rgba(124, 84, 148, 0.32);

  /* ═══════════ 字体 · Didone Editorial ═══════════ */
  --font-display: 'Bodoni Moda', 'Noto Serif SC', 'Songti SC', serif;
  --font-body: 'Geist', 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ═══════════ 字阶 ═══════════ */
  --fs-2xs: 0.6875rem;   /* 11 — caps labels */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.8125rem;    /* 13 */
  --fs-base: 0.875rem;   /* 14 */
  --fs-md: 0.9375rem;    /* 15 */
  --fs-lg: 1.0625rem;    /* 17 */
  --fs-xl: 1.25rem;      /* 20 */
  --fs-2xl: 1.625rem;    /* 26 */
  --fs-3xl: 2.125rem;    /* 34 */
  --fs-4xl: 2.875rem;    /* 46 */
  --fs-5xl: 3.75rem;     /* 60 */
  --fs-hero: clamp(3.125rem, 6.5vw, 6.25rem);

  --lh-tight: 1.06;
  --lh-heading: 1.22;
  --lh-body: 1.7;

  --ls-tight: -0.015em;
  --ls-caps: 0.22em;
  --ls-caps-soft: 0.14em;
  --ls-brand: 0.06em;

  /* ═══════════ 几何 · Soft Editorial Radii ═══════════ */
  --r-sm: 8px;
  --r: 12px;
  --r-card: 18px;
  --r-pill: 999px;

  /* ═══════════ 阴影 · Rare & Warm ═══════════ */
  --sh-soft: 0 1px 2px rgba(22, 18, 12, 0.04), 0 4px 18px rgba(22, 18, 12, 0.05);
  --sh-float: 0 12px 44px rgba(22, 18, 12, 0.10), 0 2px 8px rgba(22, 18, 12, 0.05);
  --sh-veil: 0 30px 90px rgba(22, 18, 12, 0.16);

  /* ═══════════ 间距 · Generous ═══════════ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ═══════════ 动效 · Cinematic Rhythm ═══════════ */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);       /* expo-out — 揭示 */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);        /* in-out — 幕布 */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);      /* 微交互 */
  --dur-micro: 160ms;
  --dur-ui: 260ms;
  --dur-reveal: 900ms;
  --dur-curtain: 1100ms;
  --dur-hero: 1400ms;

  /* ═══════════ 质感 ═══════════ */
  --grain-opacity: 0.028;
  --grain-tex: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* ═══════════ 层级 ═══════════ */
  --z-grain: 2;
  --z-content: 10;
  --z-nav: 800;
  --z-dock: 700;
  --z-modal: 1500;
  --z-preloader: 2000;
  --nav-h: 76px;
  --nav-h-scrolled: 62px;
  --max-w: 1360px;

  /* ═══════════ 光标层级与回退 ═══════════ */
  --z-cursor: 2200;
  --cursor-magnifier: pointer;
}