/*
  EARTHDAY.ORG skin. Values only, no selectors beyond :root.

  Palette and type taken from the official brand library, 2026-08-26:
  https://www.earthday.org/brand-library-home/

    Oxford Blue        #07074E
    Steel Blue         #2F83A6
    Light Sea Green    #72B5B9
    Anti-Flash White   #EFF1F3
    Blaze Orange       #F37321
    Chrome Yellow      #FDB714

  Typography: Montserrat Bold for headers, tracking 30 to 50 (0.03 to 0.05em),
  never below 28pt for a headline.

  Note: #20478E, eyeballed off the 2027 page earlier, is NOT in the official
  palette and has been dropped.
*/

:root {
  --color-surface: #ffffff;
  --color-surface-alt: #f4f5f7;   /* the grey the parent uses behind quotes */
  --color-surface-invert: #07074e; /* Oxford Blue */
  /*
    #20478E, not Oxford Blue.

    The brand library lists Oxford Blue #07074E, but every light section on the
    live 2026 page sets body and heading colour to #20478E. Mirroring the page
    beats mirroring the document, since the page is what the client signed off.
    Oxford Blue stays below as the inverted surface colour.
  */
  --color-ink: #20478e;
  --color-ink-muted: #55607a;
  --color-ink-invert: #ffffff;

  /* Blaze Orange is the action colour across the live site, so it keeps the
     primary button role. Steel Blue is the quieter brand accent. */
  --color-accent: #2f83a6;        /* Steel Blue */
  --color-accent-ink: #ffffff;
  --color-accent-alt: #f37321;    /* Blaze Orange */

  /* Category accents, for colour-coded sets like the 2027 focus areas. */
  --color-accent-2: #72b5b9;      /* Light Sea Green */
  --color-accent-3: #fdb714;      /* Chrome Yellow */

  --color-border: #d3d9e0;

  --font-body: "Montserrat", system-ui, sans-serif;
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-condensed: "Roboto Condensed", "Arial Narrow", sans-serif;
  --weight-display: 900;          /* Montserrat Black, per Jonah 2026-08-26 */

  /* Brand tracking, 30 to 50 in design units. */
  --tracking-display: 0.03em;

  /* Jonah, 2026-08-26: square corners on photos and buttons for now. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 0;
}