/* Compatibility names for existing product pages. Canonical brand values live in
   brand-tokens.css; new UI should use the dg-* style kit. */
@import url('./brand-tokens.css');
@import url('./brand-fonts.css');
:root {
  /* Surfaces */
  --am-bg: var(--dg-paper);               /* paper: the page */
  --am-surface: var(--dg-white);          /* cards, panels, inputs */
  --am-surface-2: var(--dg-well);        /* wells: behind ads, quiet blocks, hover fills */

  /* Text */
  --am-ink: var(--dg-ink);              /* headings, body, the primary button */
  --am-ink-hover: var(--dg-ink);        /* the primary button on hover */
  --am-ink-2: var(--dg-muted);            /* secondary text */
  --am-muted: var(--dg-muted);            /* captions, labels, meta (4.9:1 on paper) */

  /* Lines */
  --am-line: var(--dg-hair);             /* hairlines, card borders */
  --am-line-strong: var(--dg-ink);      /* input borders, quiet button borders */

  /* Accent: links, current state, focus */
  --am-accent: var(--dg-teal-deep);
  --am-accent-ink: var(--dg-white);       /* text on the accent */
  --am-accent-soft: var(--dg-success-soft);      /* accent fills: chips, notices, selection */
  --am-accent-line: var(--dg-teal);      /* decorative accent borders only */
  --am-accent-mark: var(--dg-teal);      /* "being made" marks */

  /* Status: the strong colour is for text and icons, -soft for fills, -line for borders */
  --am-success: var(--dg-teal-deep);
  --am-success-soft: var(--dg-success-soft);
  --am-success-line: var(--dg-teal);
  --am-warning: var(--dg-warning-ink);
  --am-warning-soft: var(--dg-warning-soft);
  --am-warning-line: var(--dg-yellow);
  --am-danger: var(--dg-pink-deep);
  --am-danger-soft: var(--dg-danger-soft);
  --am-danger-line: var(--dg-pink);

  /* The brand mark's gradient (the square in the wordmark) */
  --am-mark: var(--dg-yellow);

  /* Shape */
  --am-radius-s: 8px;             /* images, small chips */
  --am-radius-m: var(--dg-radius-input);            /* inputs, notices, menus */
  --am-radius-l: var(--dg-radius-card);            /* cards and panels */
  --am-radius-pill: 999px;        /* buttons, tags, nav items */
  --am-shadow: var(--dg-shadow-hard);
  --am-shadow-image: var(--dg-shadow-sm);
  --am-shadow-menu: var(--dg-shadow-hard);

  /* Type */
  --am-font-display: var(--dg-font-display);
  --am-font-body: var(--dg-font-body);
  --am-font-mono: var(--dg-font-mono);
  --am-text-xs: 12px;
  --am-text-s: 13px;
  --am-text-m: 15px;              /* body */
  --am-text-l: 17px;              /* lead, card titles */
  --am-text-xl: 20px;
  --am-display-s: clamp(28px, 3.2vw, 36px);   /* h2 */
  --am-display-m: clamp(38px, 5vw, 56px);     /* h1 */
  --am-display-l: clamp(44px, 6.6vw, 76px);   /* hero h1 */

  /* Space */
  --am-space-1: 4px;
  --am-space-2: 8px;
  --am-space-3: 12px;
  --am-space-4: 16px;
  --am-space-5: 24px;
  --am-space-6: 32px;
  --am-space-7: 48px;
  --am-space-8: 72px;
  --am-space-9: 104px;

  /* Layout */
  --am-shell: 1280px;             /* content width */
  --am-gutter: 40px;              /* side padding: 24px on tablets, 16px on phones */

  /* Header (the same light band on every page) */
  --am-header-bg: var(--dg-paper);
  --am-header-ink: var(--dg-ink);
  --am-header-line: var(--dg-ink);
}

@media (max-width: 860px) {
  :root { --am-gutter: 24px; }
}

@media (max-width: 600px) {
  :root {
    --am-gutter: 16px;
    --am-space-7: 36px;
    --am-space-8: 52px;
    --am-space-9: 72px;
  }
}