/*
 * Ad-Matrix design tokens: the one palette, type, spacing and shape for every page.
 *
 * Derived from the client gallery (/creatives, creative-client.css): cream paper, white cards, near-black ink,
 * one violet accent, serif display headings over Inter. Every page links this file first, then
 * am-components.css, then its own page CSS. Page CSS uses these variables only: no new hard-coded brand colours.
 *
 * The display face is the gallery's: Instrument Serif, with Source Serif 4 supplying the digits and hyphen
 * (Instrument Serif's figure one reads as a lower-case L). Fraunces stays in the stack as a fallback name only;
 * the shell loads Instrument Serif and Source Serif 4 (creative/base.html).
 */
:root {
  /* Surfaces */
  --am-bg: #F7F6F2;               /* paper: the page */
  --am-surface: #FFFFFF;          /* cards, panels, inputs */
  --am-surface-2: #EFEDE8;        /* wells: behind ads, quiet blocks, hover fills */

  /* Text */
  --am-ink: #17161B;              /* headings, body, the primary button */
  --am-ink-hover: #2C2A33;        /* the primary button on hover */
  --am-ink-2: #45424A;            /* secondary text */
  --am-muted: #67635E;            /* captions, labels, meta (4.9:1 on paper) */

  /* Lines */
  --am-line: #E3E0D9;             /* hairlines, card borders */
  --am-line-strong: #8E8982;      /* input borders, quiet button borders */

  /* Accent: links, current state, focus */
  --am-accent: #4B3AD1;
  --am-accent-ink: #FFFFFF;       /* text on the accent */
  --am-accent-soft: #ECE9FC;      /* accent fills: chips, notices, selection */
  --am-accent-line: #C9C2F5;      /* decorative accent borders only */
  --am-accent-mark: #8578E0;      /* "being made" marks */

  /* Status: the strong colour is for text and icons, -soft for fills, -line for borders */
  --am-success: #1E6B45;
  --am-success-soft: #E5F2EA;
  --am-success-line: #BBDCC8;
  --am-warning: #7A4E00;
  --am-warning-soft: #FAF0DA;
  --am-warning-line: #EAD49F;
  --am-danger: #A8231A;
  --am-danger-soft: #FCEBE8;
  --am-danger-line: #F2C3BC;

  /* The brand mark's gradient (the square in the wordmark) */
  --am-mark: linear-gradient(135deg, #5B7CFF 0%, #7C5BFF 100%);

  /* Shape */
  --am-radius-s: 6px;             /* images, small chips */
  --am-radius-m: 12px;            /* inputs, notices, menus */
  --am-radius-l: 20px;            /* cards and panels */
  --am-radius-pill: 999px;        /* buttons, tags, nav items */
  --am-shadow: 0 1px 2px rgba(23, 22, 27, .04), 0 24px 60px -32px rgba(11, 13, 18, .45);
  --am-shadow-image: 0 1px 2px rgba(23, 22, 27, .06), 0 8px 24px -12px rgba(23, 22, 27, .18);
  --am-shadow-menu: 0 2px 6px rgba(23, 22, 27, .06), 0 18px 40px -18px rgba(11, 13, 18, .35);

  /* Type */
  --am-font-display: "Source Serif 4", "Instrument Serif", "Fraunces", "Iowan Old Style", Georgia, serif;
  --am-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --am-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --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: #F7F6F2;
  --am-header-ink: #17161B;
  --am-header-line: #E3E0D9;
}

@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;
  }
}