/* GENERATED FROM tokens.json BY packages/tokens/build.mjs — DO NOT EDIT.
 *
 * The NewsKit design system, as custom properties. Variables are prefixed
 * --cp-* so they cannot collide with Source's own custom properties (the theme
 * already defines --background-color from a Ghost custom setting).
 *
 * NewsKit authors both schemes, so both are real here: the light theme is the
 * default, the dark theme takes over under prefers-color-scheme, and
 * data-theme on the root element wins over either. Everything that does not
 * flip — the ramps, the type scale, spacing, radii — is declared once below.
 */
:root,
:root[data-theme='light'] {
  --cp-brand: #3358CC;
  --cp-brand-light: #12387A;
  --cp-accent: #3358CC;
  --cp-accent-bright: #254CAC;
  --cp-accent-active: #12387A;
  --cp-danger: #D60000;
  --cp-bg: #FFFFFF;
  --cp-card: #F1F1F1;
  --cp-border: #E2E2E2;
  --cp-hairline: #F1F1F1;
  --cp-text: #3B3B3B;
  --cp-text-muted: #6A6A6A;
  --cp-header-bg: #FFFFFF;
  --cp-header-text: #111111;
  --cp-header-border: #E2E2E2;
  --cp-link: #3358CC;
  --cp-up: #007B22;
  --cp-down: #D60000;
  --cp-licensed: #017582;
  --cp-noc: #A75500;

  /* Every rule and container edge resolves to one of these two, so a component
     never has to reach for a tint of the text colour. */
  --cp-divider: #E2E2E2;
  --cp-divider-subtle: #F1F1F1;

  --cp-shadow-sm: 0 2px 4px 0 rgba(10, 10, 10, 0.08);
  --cp-shadow-md: 0 8px 16px 0 rgba(10, 10, 10, 0.08);
  --cp-shadow-lg: 0 20px 32px 0 rgba(10, 10, 10, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --cp-brand: #3358CC;
    --cp-brand-light: #12387A;
    --cp-accent: #708DE9;
    --cp-accent-bright: #8BA6F6;
    --cp-accent-active: #AEBFFF;
    --cp-danger: #FB5959;
    --cp-bg: #111111;
    --cp-card: #262626;
    --cp-border: #525252;
    --cp-hairline: #3B3B3B;
    --cp-text: #E2E2E2;
    --cp-text-muted: #ABABAB;
    --cp-header-bg: #111111;
    --cp-header-text: #FFFFFF;
    --cp-header-border: #3B3B3B;
    --cp-link: #708DE9;
    --cp-up: #41A05B;
    --cp-down: #FB5959;
    --cp-licensed: #289FAB;
    --cp-noc: #F79247;

    /* Every rule and container edge resolves to one of these two, so a component
       never has to reach for a tint of the text colour. */
    --cp-divider: #525252;
    --cp-divider-subtle: #3B3B3B;

    --cp-shadow-sm: 0 2px 4px 0 rgba(10, 10, 10, 0.08);
    --cp-shadow-md: 0 8px 16px 0 rgba(10, 10, 10, 0.08);
    --cp-shadow-lg: 0 20px 32px 0 rgba(10, 10, 10, 0.08);
  }
}

:root[data-theme='dark'] {
  --cp-brand: #3358CC;
  --cp-brand-light: #12387A;
  --cp-accent: #708DE9;
  --cp-accent-bright: #8BA6F6;
  --cp-accent-active: #AEBFFF;
  --cp-danger: #FB5959;
  --cp-bg: #111111;
  --cp-card: #262626;
  --cp-border: #525252;
  --cp-hairline: #3B3B3B;
  --cp-text: #E2E2E2;
  --cp-text-muted: #ABABAB;
  --cp-header-bg: #111111;
  --cp-header-text: #FFFFFF;
  --cp-header-border: #3B3B3B;
  --cp-link: #708DE9;
  --cp-up: #41A05B;
  --cp-down: #FB5959;
  --cp-licensed: #289FAB;
  --cp-noc: #F79247;

  /* Every rule and container edge resolves to one of these two, so a component
     never has to reach for a tint of the text colour. */
  --cp-divider: #525252;
  --cp-divider-subtle: #3B3B3B;

  --cp-shadow-sm: 0 2px 4px 0 rgba(10, 10, 10, 0.08);
  --cp-shadow-md: 0 8px 16px 0 rgba(10, 10, 10, 0.08);
  --cp-shadow-lg: 0 20px 32px 0 rgba(10, 10, 10, 0.08);
}

:root {
  --cp-neutral-100: #F1F1F1;
  --cp-neutral-200: #E2E2E2;
  --cp-neutral-300: #C6C6C6;
  --cp-neutral-400: #ABABAB;
  --cp-neutral-500: #919191;
  --cp-neutral-600: #6A6A6A;
  --cp-neutral-700: #525252;
  --cp-neutral-800: #3B3B3B;
  --cp-neutral-900: #262626;
  --cp-accent-100: #ECF1FF;
  --cp-accent-200: #D5E0FC;
  --cp-accent-300: #AEBFFF;
  --cp-accent-400: #8BA6F6;
  --cp-accent-500: #708DE9;
  --cp-accent-600: #3358CC;
  --cp-accent-700: #254CAC;
  --cp-accent-800: #12387A;
  --cp-accent-900: #03264D;
  --cp-teal-100: #E6F4F6;
  --cp-teal-200: #C7E7EA;
  --cp-teal-300: #97D0D6;
  --cp-teal-400: #5EB8C0;
  --cp-teal-500: #289FAB;
  --cp-teal-600: #017582;
  --cp-teal-700: #005B65;
  --cp-teal-800: #004249;
  --cp-teal-900: #002B30;
  --cp-amber-100: #FFEDE1;
  --cp-amber-200: #FDDCC6;
  --cp-amber-300: #FEB788;
  --cp-amber-400: #F79247;
  --cp-amber-500: #CD6900;
  --cp-amber-600: #A75500;
  --cp-amber-700: #804200;
  --cp-amber-800: #5D2F00;
  --cp-amber-900: #3C1F00;
  --cp-red-100: #FEECEC;
  --cp-red-200: #FED8D8;
  --cp-red-300: #FEB3B3;
  --cp-red-400: #FE8888;
  --cp-red-500: #FB5959;
  --cp-red-600: #D60000;
  --cp-red-700: #A90000;
  --cp-red-800: #7D0000;
  --cp-red-900: #550000;
  --cp-green-100: #E5F4EA;
  --cp-green-200: #C8E4D0;
  --cp-green-300: #95CAA3;
  --cp-green-400: #6DB681;
  --cp-green-500: #41A05B;
  --cp-green-600: #007B22;
  --cp-green-700: #00601A;
  --cp-green-800: #004514;
  --cp-green-900: #002D0D;

  --cp-font-heading: 'Bitter', Georgia, 'Times New Roman', Times, serif;
  --cp-font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cp-font-label: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Editorial headlines are set at NewsKit's fontWeight020; its subheadlines
     drop to 400, and only utility headings go heavier. */
  --cp-font-heading-weight: 500;
  --cp-font-heading-weight-light: 400;
  --cp-font-label-weight: 500;

  --cp-type-article-title-size: 36px;
  --cp-type-article-title-line: 40.5px;
  --cp-type-article-title-tracking: 0px;
  --cp-type-article-title-lg-size: 48px;
  --cp-type-article-title-lg-line: 54px;
  --cp-type-article-title-lg-tracking: 0px;
  --cp-type-lead-size: 32px;
  --cp-type-lead-line: 36px;
  --cp-type-lead-tracking: 0px;
  --cp-type-headline-size: 24px;
  --cp-type-headline-line: 27px;
  --cp-type-headline-tracking: 0px;
  --cp-type-headline-sm-size: 20px;
  --cp-type-headline-sm-line: 22.5px;
  --cp-type-headline-sm-tracking: 0px;
  --cp-type-standfirst-size: 20px;
  --cp-type-standfirst-line: 22.5px;
  --cp-type-standfirst-tracking: 0px;
  --cp-type-body-size: 16px;
  --cp-type-body-line: 24px;
  --cp-type-excerpt-size: 14px;
  --cp-type-excerpt-line: 21px;
  --cp-type-meta-size: 14px;
  --cp-type-meta-line: 21px;
  --cp-type-meta-weight: 500;
  --cp-type-kicker-size: 12px;
  --cp-type-kicker-line: 18px;
  --cp-type-kicker-tracking: 0.5px;
  --cp-type-kicker-weight: 500;

  --cp-gutter: 16px;

  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-6: 24px;
  --cp-space-8: 32px;

  --cp-radius-sm: 4px;
  --cp-radius-md: 8px;
  --cp-radius-lg: 16px;
}

/* A freestanding rule. NewsKit's divider is a plain 1px line in an interface
   step — it does not fade at the ends, and it does not tint the text colour. */
.cp-rule {
  height: 1px;
  border: 0;
  background: var(--cp-divider);
}