/* The Trips look, in the variables the pages already use.
 *
 * Read off tripsafrica.co: gold #CF9D61 on warm off-white, deep navy ink, generous
 * radii, pill actions, and a faint graph-paper grid behind the page. Every customer
 * page had its own copy of the same token names with a teal accent; they now link this
 * and keep only what is theirs, so the brand moves in one file.
 *
 * Two departures from the marketing site, both about pages a customer works in rather
 * than reads:
 *
 * 1. **Gold is a fill, not a label.** #CF9D61 under white text is 2.4:1 — below the
 *    floor for text anyone has to read, and these pages carry passport numbers and
 *    amounts. `--accent-fill` keeps the brand gold with navy ink on it (7.5:1), and
 *    `--accent` is the darker gold text uses (5.6:1 on white).
 * 2. **No webfont is fetched.** Sora is named first for headings because the site sets
 *    it there, but nothing here loads it: a customer page that reaches a font host
 *    hands that host the customer's IP, and the privacy policy names its recipients.
 *    Self-host Sora beside this file and add one @font-face to light it up; until then
 *    the system stack renders it, which is also what the site's own headings fall back
 *    to (their Geist class resolves to nothing).
 */

:root {
  color-scheme: light dark;

  --display: "Sora", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ground: #ffffff;
  /* Warm, not grey: the site's own surface behind cards and quiet sections. */
  --card: #faf5f0;
  --panel: #faf5f0;
  --cool: #f5f8fa;
  --text: #15162b;
  --dim: #72737f;
  --rule: #e7e1d8;

  --accent: #8c5e27;
  --accent-fill: #cf9d61;
  --accent-ink: #15162b;
  --accent-soft: #f6ecdf;

  --bad: #b3261e;
  --good: #1b7f3b;
  --warn: #8a5a00;
  --warn-soft: #fff3d6;

  --r-pill: 999px;
  --r-card: 1rem;
  --r-field: .7rem;

  --shadow: 0 1px 2px rgba(21, 22, 43, .05), 0 10px 28px -16px rgba(21, 22, 43, .22);
  /* The grid behind the site's hero. Faint enough to read as paper, not as a table. */
  --grid: rgba(21, 22, 43, .045);
}

/* The night palette, and it is written twice on purpose.
 *
 * The media query keeps the no-JavaScript path working: privacy.html carries no
 * script at all, and a customer on a dark phone should still get a dark page. The
 * attribute block is what an explicit choice sets, and `:not([data-theme="light"])`
 * on the query is what lets somebody on a dark OS choose light and be obeyed.
 *
 * Light values are not duplicated -- they stay in :root above. Only these are, and
 * the two blocks must be changed together. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #12172b;
    --card: #1b2140;
    --panel: #1b2140;
    --cool: #1a2036;
    --text: #f2efea;
    --dim: #9a9bab;
    --rule: #2b3254;

    /* Lightened so gold still reads as gold on the night ground (9.7:1). The fill and
     * the ink on it are unchanged: navy on #CF9D61 works on either ground. */
    --accent: #e4b778;
    --accent-soft: #2a2745;

    --bad: #f2b8b5;
    --good: #6cd18f;
    --warn: #ffd27a;
    --warn-soft: #3a2f14;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .6);
    --grid: rgba(255, 255, 255, .04);
  }
}

:root[data-theme="dark"] {
    --ground: #12172b;
    --card: #1b2140;
    --panel: #1b2140;
    --cool: #1a2036;
    --text: #f2efea;
    --dim: #9a9bab;
    --rule: #2b3254;

    /* Lightened so gold still reads as gold on the night ground (9.7:1). The fill and
     * the ink on it are unchanged: navy on #CF9D61 works on either ground. */
    --accent: #e4b778;
    --accent-soft: #2a2745;

    --bad: #f2b8b5;
    --good: #6cd18f;
    --warn: #ffd27a;
    --warn-soft: #3a2f14;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .6);
    --grid: rgba(255, 255, 255, .04);
}

/* The paper. A 64px grid, held to the top of the page the way the site holds it behind
 * a hero, so a long page does not read as squared paper all the way down. */
body.brand-paper {
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-repeat: repeat-x;
  background-position: center top;
}

/* TRIPS sets its wordmark in wide caps; the eyebrow above a page title borrows it. */
.brand {
  font: 600 .72rem/1 var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5rem;
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; }
h1 { text-wrap: balance; }


/* Native controls and scrollbars read this, not the custom properties. Without it
 * a dark page keeps white form fields. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }