/* Artycle design tokens (2026-11-10). Each illustration set brings its own
   palette, so Artycle's own colours stay neutral: white paper, a cool grey,
   press ink, and one proof blue for anything you can click. Status colours
   mean status and nothing else. Type: Newsreader (headings, the wordmark) and
   Schibsted Grotesk (everything else), both open-licence Google Fonts. */
:root {
  /* colour */
  --a-paper: #FFFFFF;
  --a-panel: #F1F2F4;
  --a-ink: #1A1F2B;
  --a-graphite: #5B6270;
  --a-grey-05: #F6F7F8;
  --a-grey-10: #ECEEF1;
  --a-grey-20: #D9DCE1;
  --a-grey-38: #A3A9B3;
  --a-grey-53: #7A818D;
  --a-proof: #2346C9;
  --a-proof-active: #1A36A0;
  --a-proof-tint: #E8EDFB;
  --a-mark: #C98A1B;        /* "look at this": a highlight, never text */
  --a-mark-tint: #FBF1DE;
  --a-go: #1E7F4F;
  --a-stop: #B42318;
  --a-caution: #C4560F;

  --a-bg: var(--a-paper);
  --a-bg-subtle: var(--a-panel);
  --a-text: var(--a-ink);
  --a-text-muted: var(--a-graphite);
  --a-border: var(--a-grey-20);
  --a-border-strong: var(--a-grey-38);
  --a-accent: var(--a-proof);
  --a-accent-text: var(--a-proof);
  --a-accent-active: var(--a-proof-active);
  --a-accent-subtle: var(--a-proof-tint);
  --a-danger: var(--a-stop);
  --a-focus-ring: var(--a-proof);

  /* type */
  --a-font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --a-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --a-text-small: 0.875rem;
  --a-text-label: 0.8125rem;
  --a-text-body: 1rem;
  --a-text-lead: 1.1875rem;
  --a-text-h4: 1.1875rem;
  --a-text-h3: 1.5rem;
  --a-text-h2: 2rem;
  --a-text-h1: 2.75rem;
  --a-weight-body: 400;
  --a-weight-heading: 600;
  --a-leading-tight: 1.12;
  --a-leading-snug: 1.3;
  --a-leading-relaxed: 1.6;
  --a-tracking-tight: -0.01em;
  --a-tracking-wide: 0.02em;
  --a-measure: 68ch;

  /* space, shape, motion, layers */
  --a-space-1: 4px; --a-space-2: 8px; --a-space-3: 12px; --a-space-4: 16px; --a-space-6: 24px;
  --a-space-8: 32px; --a-space-12: 48px; --a-space-16: 64px; --a-space-24: 96px;
  --a-gutter: 24px; --a-margin-sm: 16px; --a-margin-md: 32px; --a-container-max: 1200px;
  --a-radius-xs: 2px; --a-radius-sm: 6px; --a-radius-md: 10px;
  --a-shadow-2: 0 1px 2px rgba(26, 31, 43, .06), 0 4px 16px rgba(26, 31, 43, .08);
  --a-ease: cubic-bezier(0.2, 0, 0, 1);
  --a-duration-micro: 140ms; --a-duration-base: 220ms;
  --a-z-nav: 10; --a-z-toast: 100;
}

/* The ink band (the studio's header): same tokens, inverted. */
[data-theme="dark"] {
  --a-bg: var(--a-ink);
  --a-text: var(--a-paper);
  --a-text-muted: #B9BFCA;
  --a-border: #343B4A;
  --a-accent-text: #9DB2FF;
}