/*
 * tokens.css — design system for alice-reading
 * design-m1 §8: 安静工具感、单一蓝、无游戏化色彩、无彩虹柱状图
 * PRD §5.6.1: 无徽章、无音效、无连击；只有"今天看了几篇"
 */

:root {
  /* surfaces */
  --ar-color-bg: #F7F5F0;          /* page bg — 米白纸感 */
  --ar-color-card: #FFFFFF;        /* card surface */
  --ar-color-card-alt: #FBF9F4;    /* nested card / subtle stripe */
  --ar-color-border: #E5E2DA;      /* hairlines */

  /* text */
  --ar-color-text: #1F2937;        /* primary */
  --ar-color-text-muted: #6B7280;  /* secondary */
  --ar-color-text-dim: #9CA3AF;    /* tertiary / hints */

  /* semantic — 4 colors only */
  --ar-color-accent: #1F5BCC;      /* primary action / single-blue bar chart */
  --ar-color-accent-soft: #E4ECF9; /* accent bg wash */
  --ar-color-ok: #14924B;          /* correct / positive delta */
  --ar-color-warn: #B3261E;        /* wrong / negative delta */
  --ar-color-amber: #B5862B;       /* hint reveal accent */

  /* radius */
  --ar-radius-sm: 6px;
  --ar-radius: 10px;
  --ar-radius-lg: 16px;

  /* spacing scale */
  --ar-space-1: 4px;
  --ar-space-2: 8px;
  --ar-space-3: 12px;
  --ar-space-4: 16px;
  --ar-space-5: 20px;
  --ar-space-6: 24px;
  --ar-space-8: 32px;
  --ar-space-10: 40px;
  --ar-space-12: 48px;

  /* typography */
  --ar-font-family-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --ar-font-family-reading: "PingFang SC", "Hiragino Sans GB", Georgia,
    "Songti SC", serif;

  --ar-font-size-article: 18px;
  --ar-line-height-article: 1.75;

  --ar-font-size-question: 16px;
  --ar-line-height-question: 1.6;

  --ar-font-size-meta: 13px;
  --ar-font-size-title: 22px;
  --ar-font-size-page-title: 28px;

  /* elevation — subtle */
  --ar-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
  --ar-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* motion */
  --ar-duration-micro: 400ms;   /* feedback dim bar small change */
  --ar-duration-macro: 1200ms;  /* report dim bar long animation */
  --ar-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* layout */
  --ar-max-content-width: 720px;
  --ar-nav-height: 56px;
}