/* ==========================================================================
   Shuke / 述刻 — design tokens v1
   Source of truth for colour, type, spacing, radii, elevation and motion.
   Naming: --<group>-<role>[-<variant>]  →  SwiftUI: Color.<groupRoleVariant>
   e.g. --color-accent-primary → Color.accentPrimary
        --space-4              → Spacing.s4 (16pt)
        --radius-card          → Radius.card
   Every value is in points (1 CSS px == 1 iOS pt at 1x).
   Brand-specific values live ONLY in this file so the name/brand can be swapped.
   ========================================================================== */

:root {
  /* ---------- Colour · surfaces ---------- */
  --color-bg-canvas: #FAF9F5;          /* app background */
  --color-bg-sunken: #F5F2E9;          /* grouped bg, chips, tiles, skeleton base */
  --color-bg-surface: #FFFFFF;         /* cards, sheets, list rows */
  --color-bg-surface-pressed: #F1EEE6;
  --color-bg-inverse: #171717;         /* ink card: today quest, one-action, before/after */
  --color-bg-inverse-raised: #262626;  /* chips/rows inside an ink card */
  --color-bg-scrim: rgba(23, 23, 23, 0.42);

  /* ---------- Colour · text ---------- */
  --color-text-primary: #171717;       /* 16.9:1 on canvas */
  --color-text-secondary: #5C5A55;     /*  6.6:1 on canvas */
  --color-text-tertiary: #726E66;      /*  4.8:1 on canvas, 4.5:1 on sunken — captions, never < 12pt */
  --color-text-disabled: #A9A59C;      /* disabled labels only (exempt from contrast) */
  --color-text-on-inverse: #FAF9F5;
  --color-text-on-inverse-secondary: #A8A49B; /* 7.2:1 on ink */
  --color-text-on-accent: #FFFFFF;     /* 3.0:1 on coral → labels are 17pt Bold+; HC variant below */
  --color-text-on-reward: #171717;     /* on lime */

  /* ---------- Colour · lines ---------- */
  --color-line-hairline: #E8E4DA;
  --color-line-strong: #D6D1C4;
  --color-line-inverse: rgba(250, 249, 245, 0.12);
  --color-focus-ring: #6E4BFF;

  /* ---------- Colour · brand roles (strictly scoped) ---------- */
  --color-accent-primary: #FF6030;          /* ONLY the primary action of a screen + live recording */
  --color-accent-primary-pressed: #E8501F;
  --color-accent-primary-strong: #C4421A;   /* coral TEXT on light surfaces, 4.5:1+ (ADR-001 D-colour; see tokens.md) */
  --color-accent-primary-soft: #FFE9E0;     /* recording halo only */
  --color-reward: #DFFC66;                  /* ONLY XP, level, achievements, round-2 score */
  --color-reward-deep: #80951D;             /* reward strokes on light bg, 3:1+ (UI graphics) */
  --color-reward-soft: #F4FDD2;

  /* ---------- Colour · topic / dimension accents ---------- */
  --color-topic-coral: #FF6030;   /* topic tile only (never a CTA lookalike: tiles are square + glyph) */
  --color-topic-violet: #6E4BFF;
  --color-topic-violet-soft: #EEE9FF;
  --color-topic-green: #1E9E6A;
  --color-topic-green-soft: #E2F4EA;
  --color-topic-ink: #171717;
  --color-topic-amber: #E09A1A;
  --color-topic-amber-soft: #FFF3D6;

  --color-dim-key-info: #6E4BFF;   /* 关键信息 */
  --color-dim-structure: #1E9E6A;  /* 逻辑结构 */
  --color-dim-efficiency: #E09A1A; /* 表达效率 */
  --color-dim-fluency: #171717;    /* 流畅度 */

  /* ---------- Colour · status ---------- */
  --color-status-success: #1E9E6A;
  --color-status-success-soft: #E2F4EA;
  --color-status-warning: #A05F00;     /* text-safe amber, 4.5:1+ on every light bg; streak ring and marker */
  --color-status-warning-soft: #FFF3D6;
  --color-status-danger: #D33A2C;      /* destructive actions, errors */
  --color-status-danger-soft: #FDE7E4;
  --color-status-info: #4B5563;
  --color-status-info-soft: #EDEBE4;
  --color-recording: #FF3B30;          /* in-app recording dot (mirrors iOS indicator) */

  /* ---------- Colour · score bands (ADR-001 D3) — never red/shaming ---------- */
  --color-band-retry: #B86E00;      /* < 50  需要再练 */
  --color-band-basic: #171717;      /* 50–69 基础不错 */
  --color-band-clear: #1E9E6A;      /* 70–84 讲清楚了 */
  --color-band-excellent: #6E4BFF;  /* ≥ 85  出色 */

  /* ---------- Typography ---------- */
  --font-family-text: "Avenir Next", "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans SC", sans-serif;
  --font-family-reading: "PingFang SC", "Avenir Next", -apple-system, "Noto Sans SC", sans-serif; /* article body: CJK-first */
  --font-family-reading-latin: "Avenir Next", -apple-system, "Helvetica Neue", sans-serif;                /* article body when lang=en */
  --type-reading-latin-leading: 28px;                                                                       /* 1.55 for Latin vs 1.78 for CJK */
  --font-family-numeric: "Avenir Next", -apple-system, "SF Pro Rounded", sans-serif;              /* scores, timers, XP */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  /* Dynamic Type multiplier. 1 = iOS "Large" (default). Gallery tests 1.2 and 1.35 (≈ AX1). */
  --dt: 1;

  /* size / line-height pairs — each maps to an iOS text style (see tokens.md) */
  --type-display-size: 60px;   --type-display-leading: 64px;    /* custom, relativeTo: .largeTitle (score count-up) */
  --type-large-title-size: 34px; --type-large-title-leading: 41px;
  --type-title1-size: 28px;    --type-title1-leading: 34px;
  --type-title2-size: 22px;    --type-title2-leading: 28px;
  --type-title3-size: 20px;    --type-title3-leading: 25px;
  --type-headline-size: 17px;  --type-headline-leading: 22px;
  --type-body-size: 17px;      --type-body-leading: 24px;
  --type-reading-size: 18px;   --type-reading-leading: 32px;    /* custom, relativeTo: .body */
  --type-callout-size: 16px;   --type-callout-leading: 21px;
  --type-subheadline-size: 15px; --type-subheadline-leading: 20px;
  --type-footnote-size: 13px;  --type-footnote-leading: 18px;
  --type-caption1-size: 12px;  --type-caption1-leading: 16px;
  --type-caption2-size: 11px;  --type-caption2-leading: 13px;
  --type-timer-size: 44px;     --type-timer-leading: 48px;      /* custom, relativeTo: .largeTitle, monospaced digits */
  --type-tracking-tight: -0.02em;
  --type-tracking-caps: 0.08em;

  /* ---------- Spacing (4pt grid) ---------- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-gutter: 20px;          /* screen horizontal margin */
  --space-section: 32px;         /* between sections */
  --size-hit-min: 44px;          /* minimum hit target */
  --size-cta-height: 56px;
  --size-record-button: 96px;
  --size-record-ring: 208px;
  --size-tabbar-height: 49px;
  --size-navbar-height: 52px;
  --safe-top: 59px;              /* iPhone 15/16 Pro portrait */
  --safe-bottom: 34px;

  /* ---------- Radii ---------- */
  --radius-xs: 8px;    /* tags, small badges */
  --radius-sm: 12px;   /* evidence rows, inputs, topic tiles */
  --radius-md: 16px;   /* list cards, stat tiles */
  --radius-lg: 20px;   /* hero cards (quest, one-action) */
  --radius-xl: 28px;   /* sheets (top corners), device */
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-button: var(--radius-md);

  /* ---------- Elevation ---------- */
  --elevation-0: none;
  --elevation-1: 0 1px 0 rgba(23,23,23,0.04), 0 1px 3px rgba(23,23,23,0.05);          /* surface cards */
  --elevation-2: 0 8px 24px rgba(23,23,23,0.10), 0 2px 6px rgba(23,23,23,0.06);       /* ink cards, floating CTA */
  --elevation-3: 0 20px 48px rgba(23,23,23,0.18), 0 4px 12px rgba(23,23,23,0.08);     /* sheets, overlays */
  --elevation-record: 0 14px 30px rgba(255,96,48,0.35);                                /* recording button */

  /* ---------- Motion ---------- */
  --motion-duration-instant: 100ms;   /* press states */
  --motion-duration-fast: 160ms;      /* chip select, toggle */
  --motion-duration-base: 240ms;      /* push/pop content, sheet fade */
  --motion-duration-slow: 400ms;      /* card expand, progress step */
  --motion-duration-celebrate: 900ms; /* XP bar fill, trophy pop */
  --motion-duration-countup: 1200ms;  /* score count-up */
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* ≈ .spring(response: 0.45, dampingFraction: 0.7) */
  --motion-breath: 1600ms;            /* recording ring pulse period */
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: #121110;
    --color-bg-sunken: #1C1B19;
    --color-bg-surface: #201F1C;
    --color-bg-surface-pressed: #2A2926;
    --color-bg-inverse: #2B2926;
    --color-bg-inverse-raised: #36332F;
    --color-bg-scrim: rgba(0, 0, 0, 0.6);
    --color-text-primary: #F5F2E9;
    --color-text-secondary: #B9B4A9;
    --color-text-tertiary: #8F8A80;
    --color-text-disabled: #5E5A53;
    --color-text-on-inverse: #F5F2E9;
    --color-text-on-inverse-secondary: #ABA69B;
    --color-line-hairline: #2E2C28;
    --color-line-strong: #3D3A35;
    --color-accent-primary: #FF6030;     /* white label 3.0:1, as in light */
    --color-accent-primary-strong: #FF6A3D;  /* coral text on dark, 6.6:1 */
    --color-accent-primary-pressed: #FF8259;
    --color-accent-primary-soft: #3A2116;
    --color-reward-deep: #DFFC66;
    --color-reward-soft: #2B3312;
    --color-topic-violet: #8B6DFF;
    --color-topic-violet-soft: #251E44;
    --color-topic-green: #2DB37D;
    --color-topic-green-soft: #14281F;
    --color-topic-ink: #F5F2E9;
    --color-topic-amber: #F0AE38;
    --color-topic-amber-soft: #33270F;
    --color-dim-key-info: #8B6DFF;
    --color-dim-structure: #2DB37D;
    --color-dim-efficiency: #F0AE38;
    --color-dim-fluency: #F5F2E9;
    --color-status-success: #2DB37D;
    --color-status-success-soft: #14281F;
    --color-status-warning: #F0AE38;
    --color-status-warning-soft: #33270F;
    --color-status-danger: #FF6B5E;
    --color-status-danger-soft: #3A1714;
    --color-status-info-soft: #26241F;
    --color-band-retry: #F0AE38;
    --color-band-basic: #F5F2E9;
    --color-band-clear: #2DB37D;
    --color-band-excellent: #8B6DFF;
    --elevation-1: 0 0 0 1px #2E2C28;
    --elevation-2: 0 0 0 1px #3A3733, 0 8px 24px rgba(0,0,0,0.5);
    --elevation-3: 0 0 0 1px #3A3733, 0 20px 48px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  --color-bg-canvas: #121110;
  --color-bg-sunken: #1C1B19;
  --color-bg-surface: #201F1C;
  --color-bg-surface-pressed: #2A2926;
  --color-bg-inverse: #2B2926;
  --color-bg-inverse-raised: #36332F;
  --color-bg-scrim: rgba(0, 0, 0, 0.6);
  --color-text-primary: #F5F2E9;
  --color-text-secondary: #B9B4A9;
  --color-text-tertiary: #8F8A80;
  --color-text-disabled: #5E5A53;
  --color-text-on-inverse: #F5F2E9;
  --color-text-on-inverse-secondary: #ABA69B;
  --color-line-hairline: #2E2C28;
  --color-line-strong: #3D3A35;
  --color-accent-primary: #FF6030;     /* white label 3.0:1, as in light */
  --color-accent-primary-strong: #FF6A3D;  /* coral text on dark, 6.6:1 */
  --color-accent-primary-pressed: #FF8259;
  --color-accent-primary-soft: #3A2116;
  --color-reward-deep: #DFFC66;
  --color-reward-soft: #2B3312;
  --color-topic-violet: #8B6DFF;
  --color-topic-violet-soft: #251E44;
  --color-topic-green: #2DB37D;
  --color-topic-green-soft: #14281F;
  --color-topic-ink: #F5F2E9;
  --color-topic-amber: #F0AE38;
  --color-topic-amber-soft: #33270F;
  --color-dim-key-info: #8B6DFF;
  --color-dim-structure: #2DB37D;
  --color-dim-efficiency: #F0AE38;
  --color-dim-fluency: #F5F2E9;
  --color-status-success: #2DB37D;
  --color-status-success-soft: #14281F;
  --color-status-warning: #F0AE38;
  --color-status-warning-soft: #33270F;
  --color-status-danger: #FF6B5E;
  --color-status-danger-soft: #3A1714;
  --color-status-info-soft: #26241F;
  --color-band-retry: #F0AE38;
  --color-band-basic: #F5F2E9;
  --color-band-clear: #2DB37D;
  --color-band-excellent: #8B6DFF;
  --elevation-1: 0 0 0 1px #2E2C28;
  --elevation-2: 0 0 0 1px #3A3733, 0 8px 24px rgba(0,0,0,0.5);
  --elevation-3: 0 0 0 1px #3A3733, 0 20px 48px rgba(0,0,0,0.6);
}

/* ---------- Increase Contrast (UIAccessibility.isDarkerSystemColorsEnabled) ---------- */
:root[data-contrast="high"] {
  --color-accent-primary: #C2410C;   /* white label 5.2:1 */
  --color-accent-primary-strong: #9A3412;
  --color-accent-primary-pressed: #9A3412;
  --color-text-tertiary: #5C5A55;
  --color-line-hairline: #CFCABD;
}

/* ---------- Reduced motion (UIAccessibility.isReduceMotionEnabled) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-slow: 160ms;
    --motion-duration-celebrate: 0ms;
    --motion-duration-countup: 0ms;
    --motion-ease-spring: var(--motion-ease-standard);
  }
}
:root[data-motion="reduced"] {
  --motion-duration-slow: 160ms;
  --motion-duration-celebrate: 0ms;
  --motion-duration-countup: 0ms;
  --motion-ease-spring: var(--motion-ease-standard);
}