/* ---------------------------------------------------------------------
   Type and theme layer. Loads after brand.css and only adds.

   Display is Cooper BT, which is a licensed Bitstream face and is not on
   this machine or on Google Fonts, so it cannot be rendered here. The
   stack names it first, so it will be used the moment it is installed or
   self-hosted. Behind it sits Fraunces at its softest and wonkiest axis
   settings, which is the closest free approximation of Cooper's heavy
   bulbous terminals. If you licence Cooper, nothing here needs changing.

   Dark mode is the ink ramp reversed. brand.css draws surfaces from the
   light end of that ramp and text from the dark end, so reversing it
   flips the whole site at once; only the handful of rules that reach
   past the ramp are restated below.
   --------------------------------------------------------------------- */

:root {
  /* the regular cut, not the black one. "Cooper Black" is a separate
     family name for the heavy weight, so it is deliberately not here. */
  --display-face: "Cooper BT", "Cooper Lt BT", Fraunces, ui-serif, Georgia, serif;
  --font-sans: Figtree, ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Figtree is loaded at 400 and 500 only. brand.css asks for 700 and 900,
     and the browser answers those by synthesising a fake bold: smeared
     stems, wrong widths, and visibly not the same face. Cap both. The
     serif display sets its own weight and is unaffected. */
  --weight-bold: 500;
  --weight-black: 500;
}

.display, .h2-lg, .h2, .h3, .quote, .modal-card .h2, .qa-q, .buy-figure,
.pilot h1, .res h1, .hey h1 {
  font-family: var(--display-face);
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.display { line-height: 1.05; }

/* ---------- the switch itself ---------- */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-body); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--surface-sunken); color: var(--text-display); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ---------- dark ---------- */
[data-theme="dark"] {
  --paper:   #14120E;
  --ink-50:  #1A1711;
  --ink-100: #221E17;
  --ink-200: #3C372B;
  --ink-300: #8E887C;   /* footer links: 5.0:1 on the dark footer */
  --ink-400: #8E887C;
  --ink-500: #A49C8D;
  --ink-700: #CFC8BA;
  --ink-900: #E7E0D2;
  --ink-950: #F3EEE3;

  --surface-page: #14120E;
  --surface-card: #1E1B14;
  --surface-sunken: #221E17;
  --surface-inverse: #1B1811;
  --surface-accent-soft: #221E17;

  --text-display: #F3EEE3;
  --text-body: #CFC8BA;
  --text-muted: #A49C8D;
  --text-faint: #8E887C;
  --text-inverse: #14120E;
  --text-accent: #DCCF9A;

  --border-default: #3C372B;
  --border-subtle: #2C281F;
  --border-strong: #4A4538;

  /* The clay ramp is the accent ramp. Anything reaching for --clay-600
     directly, rather than through --accent, needs it to flip too: the
     button on /lost was dark-on-dark at 1.01:1 without this. */
  --clay-50:  #221E17;
  --clay-100: #2A2620;
  --clay-600: #F3EEE3;
  --clay-700: #E6DFCF;

  --accent: #F3EEE3;
  --accent-hover: #E6DFCF;
  --accent-soft: #2A2620;
  --focus-ring: #6E6654;

  --warning-soft: #5C5324;

  /* The pale tints are used directly as surfaces (the card on /lost, for
     one). They do not flip with the ink ramp, so cream text was landing
     on light blue. Each gets a dark counterpart at roughly 8.8:1. */
  --sea-100: #1E2A33;
  --sea-600: #6FB3D6;
  --amber-100: #2E2A1A;
  --moss-100: #1F2A20;
  --coral-100: #32201E;
  --success: #7FB98A;
  --success-soft: #24301F;
  --danger: #E08C86;
  --danger-soft: #3A221F;
  --coral-600: #C9615B;
  --info: #8FBBD9;
  --info-soft: #1E2A33;
}

/* The rules below were written for a dark band on a light page, so they
   take their colour from --paper or --accent and invert along with the
   ramp. Each one has to be said again. */
[data-theme="dark"] .cta { background: #1B1811; border-top: 1px solid var(--border-subtle); }
[data-theme="dark"] .cta-lede { color: var(--text-body); }
[data-theme="dark"] .cta .display,
[data-theme="dark"] .cta h2 { color: var(--text-display); }
[data-theme="dark"] .footer-head { color: var(--text-display); }
[data-theme="dark"] .site-footer { border-top: 1px solid var(--border-subtle); }
[data-theme="dark"] .hero-film { background: color-mix(in srgb, var(--paper) 72%, transparent); }
[data-theme="dark"] .modal { background: color-mix(in srgb, #060503 72%, transparent); }
[data-theme="dark"] .modal-card { background: var(--surface-card);
                                  border: 1px solid var(--border-default); }
[data-theme="dark"] .modal-card .h2 { color: var(--text-display); }
[data-theme="dark"] .modal-lede { color: var(--text-body); }
[data-theme="dark"] .modal-close { color: var(--text-muted); }

/* the phone's frame gradient comes from the ramp and goes pale otherwise */
[data-theme="dark"] .ph-stop-1 { stop-color: #4A4538; }
[data-theme="dark"] .ph-stop-2 { stop-color: #2A2620; }
[data-theme="dark"] .ph-stop-3 { stop-color: #141210; }

/* The wordmark is dark ink, so it needs the inverse file on a dark page.
   Keyed on the file rather than on the wrapper, because pilotlist and
   hey.html put the mark straight into <main> with no .nav-mark around it. */
[data-theme="dark"] img[src$="oarka-wordmark.png"] {
  content: url("./brand/oarka-wordmark-inverse.png");
}

/* ---------------------------------------------------------------------
   brand.css hides .nav-links below 820px and puts nothing in their place,
   so on a laptop at half width, and on every phone, the header offers no
   navigation at all. Rather than add a menu to open and close, the links
   wrap onto their own row under the wordmark. Everything stays reachable,
   nothing needs JavaScript, and there is no state to get stuck.
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .nav-inner { flex-wrap: wrap; row-gap: var(--space-2); }
  .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: center;
    gap: var(--space-5);
    font-size: var(--text-sm);
  }
}
@media (max-width: 420px) {
  .nav-links { gap: var(--space-4); }
  .nav-inner { padding-inline: var(--space-4); }
}