/* Dark appearance. Follows the visitor's system setting, as apple.com does. Loaded last on
   every page, after each page's own stylesheets. The colour roles flip here; surfaces that
   were written as fixed light colours are redrawn one by one below. Sections that are dark
   in the light appearance (results, dark tiles, the Work hero) stay as they are. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* The older stylesheets' roles (case pages, Bonolo) flip with the Apple ones. */
    --paper: #000; --paper-soft: #161617; --ink: #f5f5f7; --muted: #a1a1a6;
    --line: rgba(255, 255, 255, .2);
    --glass-light: rgba(22, 22, 23, .6); --glass-shadow: 0 16px 44px rgba(0, 0, 0, .5);
    --a-ink: #f5f5f7;
    --a-ink-2: #a1a1a6;
    --a-ink-3: #86868b;
    --a-bg: #000;
    --a-bg-alt: #161617;
    --a-bg-dark: #000;
    --a-bg-dark-alt: #1d1d1f;
    --a-rule: #424245;
    /* The CFX blue stays for filled buttons; blue text uses a lighter step of it to stay legible on black. */
    --a-link: #5b70ff;
    --a-text-blue: #5b70ff;
    --a-surface: #1d1d1f;          /* raised panels, cards and fields */
    --a-surface-2: #2c2c2e;        /* hover and pressed states */
  }
  html, body { background: var(--a-bg); color: var(--a-ink); }
  html body:is(.apple-page, .work-page, .conversion-page, .bonolo-page, .utility-page) { background: var(--a-bg); color: var(--a-ink); }

  /* Navigation: dark glass. */
  html body .site-nav#siteNav, html body .site-nav,
  html body:is(.tribute-page, .work-page, .apple-page, .conversion-page, .utility-page) :is(.site-nav, .conversion-nav)#siteNav { background: rgba(22, 22, 23, .8); }
  html body .site-nav .brand-mark, html body .site-nav .nav-links a:not(.nav-cta) { color: var(--a-ink); }
  html body .site-nav .brand-mark .brand-accent { color: var(--a-text-blue); }
  @media (max-width: 734px) { html body .site-nav#siteNav, html body:is(.tribute-page, .work-page, .apple-page, .conversion-page, .utility-page) :is(.site-nav, .conversion-nav)#siteNav { background: #161617; } }

  /* Controls that filled with the ink colour now fill with the surface and use light text. */
  .skip-link, .a-step-num { background: var(--a-surface-2); color: var(--a-ink); }
  html body.work-page .archive-section .filter-button[aria-pressed="true"],
  .work-page .filter-button:is([aria-pressed="true"], .is-active, [aria-selected="true"]) { background: #f5f5f7 !important; color: #1d1d1f !important; }
  html body.work-page .archive-section .filter-button { background: var(--a-surface) !important; color: var(--a-ink) !important; }
  html body.work-page .archive-section .filter-button:hover { background: var(--a-surface-2) !important; }
  html body.work-page .filter-head { background: var(--a-surface); color: var(--a-ink); }
  html body.work-page .filter-head:hover { background: var(--a-surface-2); }
  html body.work-page .filter-head .filter-reset, html body.work-page .filter-head .filter-reset:hover { background: var(--a-surface-2); box-shadow: none; }

  /* Home: light tiles and cards become raised dark surfaces. */
  .a-tile--light { background: var(--a-surface); color: var(--a-ink); }
  .a-tile--light::before { background: linear-gradient(180deg, var(--a-surface) 0%, rgba(29, 29, 31, .9) 30%, rgba(29, 29, 31, 0) 58%); }
  .a-tile--light.a-tile--bottom::before { background: linear-gradient(0deg, var(--a-surface) 0%, rgba(29, 29, 31, .88) 30%, rgba(29, 29, 31, 0) 56%); }
  .a-card--mist { background: linear-gradient(170deg, #2c2c2e 0%, #1d1d1f 100%); color: var(--a-ink); }
  .a-hero .a-brands, .a-hero .a-queen-stage + .a-brands {
    background: linear-gradient(180deg, rgba(29, 29, 31, .78) 0%, rgba(22, 22, 23, .82) 45%, #000 100%);
  }
  .a-hero ~ .a-tiles { box-shadow: 0 -24px 48px rgba(0, 0, 0, .5); }

  /* Contact form. */
  .a-form { background: var(--a-surface); }
  .a-field :is(input, textarea, select), .a-form :is(input, textarea, select) { background: #2c2c2e; color: var(--a-ink); }
  .a-field :is(input, textarea):focus { background: #2c2c2e; box-shadow: 0 0 0 4px rgba(133, 147, 255, .35); }
  .a-form ::placeholder { color: var(--a-ink-3); }

  /* Blue words (headline accents, card eyebrows, the wordmark) take the lighter blue. */
  .a-accent, .site-nav .brand-mark .brand-accent, .a-card:not(.a-card--blue, .a-card--sky) .a-card-eyebrow,
  .work-page .case-study-panel .capability-number { color: var(--a-text-blue); }

  /* The queen: a faint glow behind her so the black rope hair keeps its outline on black. */
  .a-queen-stage { isolation: isolate; }
  .a-queen-stage::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(900px, 140vw); aspect-ratio: 1.1;
    translate: -50% -12%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0));
  }

  /* Bonolo: translucent panels over the sky turn dark, and the line-art sky turns light. */
  html body.tribute-page {
    --cosmos-ink: rgba(245, 245, 247, .14); --cosmos-blush: rgba(232, 160, 178, .3);
    --cosmos-lilac: rgba(170, 170, 235, .3); --cosmos-mint: rgba(140, 200, 160, .3);
  }
  html body.tribute-page :is(.book-world, .awards-section) { background: rgba(22, 22, 23, .72) !important; }
  html body.tribute-page .button--light:hover { background: var(--a-surface-2); }
  html body.tribute-page .legacy-card-more { background: rgba(255, 255, 255, .05); }
  html body.tribute-page .legacy-card-more summary:hover { background: rgba(255, 255, 255, .07); }
  html body.tribute-page .legacy-card-toggle { background: var(--a-surface-2); box-shadow: none; }

  /* Related-work cards on case pages: the rose "Play film" badge keeps its dark text, and the
     image placeholder is a dark surface. */
  .work-card-badge { color: #11110f; }
  .work-card-media { background-color: var(--a-surface); }
}