/* AcctPanda design tokens — Phase 1 (emerald + dark slate, mockup-aligned) */
:root {
  /* Brand */
  --ap-green: #0f7a4a;
  --ap-green-deep: #0b5c38;
  --ap-green-bright: #12a35f;
  --ap-green-soft: #e6f6ee;
  --ap-green-mint: #c0edd8;
  --ap-green-wash: #f3fbf7;

  /* Neutrals / surfaces */
  --ap-ink: #1a2224;
  --ap-ink-2: #2c3538;
  --ap-muted: #6b7376;
  --ap-line: #dce5e0;
  --ap-bg: #f4faf7;          /* light mint / beige-green harmony */
  --ap-bg-warm: #f7f4ef;     /* keep existing beige as secondary */
  --ap-surface: #ffffff;
  --ap-header: #0f1a1c;      /* dark slate */
  --ap-footer: #0f1a1c;

  /* Accents */
  --ap-price: #d9480f;
  --ap-star: #e0a100;
  --ap-danger: #c92a2a;
  --ap-info: #1c7ed6;

  /* Type */
  --ap-font: "PingFang SC", "Noto Sans SC", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ap-font-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ap-fs-xs: 12px;
  --ap-fs-sm: 13px;
  --ap-fs-md: 15px;
  --ap-fs-lg: 18px;
  --ap-fs-xl: 24px;
  --ap-fs-2xl: clamp(28px, 4vw, 40px);
  --ap-fs-3xl: clamp(32px, 5vw, 48px);
  --ap-lh: 1.55;
  --ap-lh-tight: 1.25;

  /* Layout */
  --ap-wrap: 1180px;
  --ap-gutter: 20px;
  --ap-radius-sm: 8px;
  --ap-radius: 12px;
  --ap-radius-lg: 16px;
  --ap-radius-pill: 999px;
  --ap-shadow: 0 10px 28px rgba(15, 26, 28, 0.07);
  --ap-shadow-sm: 0 4px 14px rgba(15, 26, 28, 0.06);
  --ap-shadow-lg: 0 18px 40px rgba(15, 26, 28, 0.12);

  /* Controls */
  --ap-btn-h: 44px;
  --ap-input-h: 42px;
  --ap-focus: 0 0 0 3px rgba(15, 122, 74, 0.28);
}