/**
 * apm-tokens-v2.css — design tokens only (:root).
 * No layout or component selectors here (easier caching + predictable cascade).
 */
:root {
  /* Chrome */
  --apm-chrome: #111113;
  --apm-chrome-2: #1a1a1d;
  --apm-chrome-3: #232328;
  --apm-chrome-border: rgba(255, 255, 255, 0.07);
  --apm-chrome-text: #ffffff;
  --apm-chrome-muted: #7a7884;

  /* Canvas / surfaces */
  --apm-page-bg: #000000;
  --apm-canvas: #f5f3ef;
  --apm-surface: #ffffff;
  --apm-surface-2: #faf9f7;
  --apm-divider: #e4e2de;

  /* Ink */
  --apm-ink: #111113;
  --apm-ink-2: #4a4845;
  --apm-ink-3: #8a8884;
  --apm-ink-4: #b4b0a8;

  /* Brand */
  --apm-peach: #f5924e;
  --apm-peach-d: #d97a38;
  --apm-peach-l: #f9b485;
  --apm-peach-bg: #fef0e6;
  --apm-peach-ring: rgba(245, 146, 78, 0.3);

  /* Cart / confirm */
  --apm-mint: #5fb878;
  --apm-mint-d: #4ea465;
  --apm-mint-bg: #e8f6ec;
  --apm-mint-border: #b8e0c0;
  --apm-mint-text: #1f7a3a;

  /* Semantic */
  --apm-rose: #d94c4c;
  --apm-amber-bg: #fdf3df;
  --apm-amber-border: #f0d99a;
  --apm-amber-text: #8a5a14;
  --apm-info: #4a7ec4;
  --apm-info-bg: #e8f0fa;
  --apm-info-border: #c0d4ec;
  --apm-info-text: #1f4a82;

  /* Fields */
  --apm-field-bg: #f7f6f4;
  --apm-field-border: #d8d6d0;

  /* Typography */
  --apm-font: "Roboto", Arial, Helvetica, sans-serif;
  --apm-font-cond: "Roboto Condensed", "Roboto", Arial, sans-serif;
  --apm-font-mono: "Roboto Mono", "Courier New", monospace;

  /* Radii / shadow */
  --apm-r-sm: 6px;
  --apm-r-md: 8px;
  --apm-r-lg: 10px;
  --apm-r-xl: 14px;
  --apm-shadow-sm: 0 2px 4px rgba(17, 17, 19, 0.06), 0 1px 2px rgba(17, 17, 19, 0.04);
  --apm-shadow-lg: 0 14px 36px rgba(17, 17, 19, 0.12), 0 4px 10px rgba(17, 17, 19, 0.06);

  /* Responsive contract — use in JS or docs; media queries use literals */
  --apm-bp-tablet: 576px;
  --apm-bp-mobile: 400px;
}