/* The brand: night, signal, sky, paper, online (docs/design/brand/launch-cards.png). ONE file for both public faces: isopo.net and the resident app
   (app.isopo.net, the router's doorway). It holds the colours, space, radii and type (the same names design/tokens.css has, so the portal's rules read
   them unchanged) and the card kit every page is built from. Edit it here; python3 design/sync.py makes the copies and tests/test_brand.py fails if
   one differs. The operator pages keep design/tokens.css and do not load this. Dark is designed: its own surfaces, the cards lifting off the night. */

:root {
  --night: #0e1420;  --signal: #ff7a1a;  --sky: #3d8bff;  --paper: #f6f3ec;  --online: #22c55e;   /* the five colours of launch-cards.png */
  --ink: #0e1420;  --muted: #5a6275;  --surface: #f6f3ec;  --panel: #ffffff;  --sunken: #ece8de;  --line: #e4dfd3;  --control: #7a8191;
  --blue: #1f5fd1;  --blue-hover: #184eb0;  --blue-ink: #ffffff;  --blue-soft: #e6efff;
  --orange: #ff7a1a;  --orange-hover: #ff8f3d;  --navy: #0e1420;  --orange-ink: #b4500a;  --orange-soft: #ffeedd;
  --hero-from: #0e1420;  --hero-to: #0e1420;  --hero-edge: #0e1420;  --hero-ink: #f6f3ec;  --hero-muted: #b6bfd3;  --blue-on-hero: #3d8bff;
  --card-paper: #ffffff;  --card-paper-ink: #0e1420;  --card-paper-edge: #e4dfd3;
  --ok: #127a4b;  --ok-soft: #e6f4ec;  --warn: #8a5a00;  --warn-soft: #fff4d6;  --warn-strong: #9a5b00;
  --danger: #b42318;  --danger-soft: #fdecea;  --on-danger: #ffffff;  --unknown: #515c6b;  --unknown-soft: #eef0f3;
  --focus: #1f5fd1;  --series: #1f5fd1;
  --shadow: 0 0 0 0 transparent;  --shadow-nav: 0 10px 30px rgb(14 20 32 / 14%);  --shadow-sheet: 0 -12px 40px rgb(14 20 32 / 18%);
  /* Space: an 8 px grid; nothing in between (px values, for people; rem below follows 1rem = 16px). */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;  --space-5: 1.5rem;
  --space-6: 2rem;     --space-7: 3rem;    --space-8: 4rem;     --space-9: 6rem;
  --gap-section: 3rem;        /* between sections (2rem on phones: see the components) */
  --gap-panel: 1.5rem;        /* inside a panel (1rem on phones) */
  --row-min: 3.5rem;          /* a row is at least 56 px tall */
  --width-read: 44rem;        /* reading pages */
  --width-list: 72rem;        /* operator lists */

  /* Shape */
  --radius-panel: 1.5rem;     /* 24 px: cards, panels and the hero */
  --radius-row: 1rem;         /* 16 px: rows and inputs */
  --radius-chip: 999px;
  --radius-button: 1.1rem;

  /* Type: Geist and Geist Mono (vendored). 16 px base. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-display: clamp(2.25rem, 5.5vw, 3.75rem);     /* one per page; weight 760, tracking -0.04em, line 1.05 */
  --text-page: 1.75rem;                               /* operator page title; 700 */
  --text-section: 1.25rem;                            /* 680 */
  --text-row: 1rem;                                   /* 620 */
  --text-body: 1rem;                                  /* 400, line 1.55 */
  --text-small: 0.875rem;                             /* 450, muted */
  --text-number: clamp(2rem, 4vw, 2.75rem);           /* the big number: tabular, 760 */
  --measure: 68ch;                                    /* the longest line of prose */

  /* Motion: quick and quiet, opacity and height only. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f6f3ec;  --muted: #a3adc2;  --surface: #0e1420;  --panel: #182133;  --sunken: #0a0f19;  --line: #26324a;  --control: #6b7690;
    --blue: #8db8ff;  --blue-hover: #a9cbff;  --blue-ink: #0e1420;  --blue-soft: #1d2a45;
    --orange: #ff7a1a;  --orange-hover: #ff8f3d;  --navy: #0e1420;  --orange-ink: #ff9a4d;  --orange-soft: #3a2412;
    --hero-from: #182133;  --hero-to: #182133;  --hero-edge: #26324a;  --hero-ink: #f6f3ec;  --hero-muted: #b6bfd3;  --blue-on-hero: #3d8bff;
    --card-paper: #f6f3ec;  --card-paper-ink: #0e1420;  --card-paper-edge: #f6f3ec;
    --ok: #5fd39a;  --ok-soft: #14301f;  --warn: #f1c15b;  --warn-soft: #3a2e12;  --warn-strong: #9a5b00;
    --danger: #ff8a80;  --danger-soft: #3a1714;  --on-danger: #0e1420;  --unknown: #aab4c4;  --unknown-soft: #1f2736;
    --focus: #8db8ff;  --series: #8db8ff;
    --shadow: 0 0 0 0 transparent;  --shadow-nav: 0 10px 30px rgb(0 0 0 / 50%);  --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 50%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #f6f3ec;  --muted: #a3adc2;  --surface: #0e1420;  --panel: #182133;  --sunken: #0a0f19;  --line: #26324a;  --control: #6b7690;
  --blue: #8db8ff;  --blue-hover: #a9cbff;  --blue-ink: #0e1420;  --blue-soft: #1d2a45;
  --orange: #ff7a1a;  --orange-hover: #ff8f3d;  --navy: #0e1420;  --orange-ink: #ff9a4d;  --orange-soft: #3a2412;
  --hero-from: #182133;  --hero-to: #182133;  --hero-edge: #26324a;  --hero-ink: #f6f3ec;  --hero-muted: #b6bfd3;  --blue-on-hero: #3d8bff;
  --card-paper: #f6f3ec;  --card-paper-ink: #0e1420;  --card-paper-edge: #f6f3ec;
  --ok: #5fd39a;  --ok-soft: #14301f;  --warn: #f1c15b;  --warn-soft: #3a2e12;  --warn-strong: #9a5b00;
  --danger: #ff8a80;  --danger-soft: #3a1714;  --on-danger: #0e1420;  --unknown: #aab4c4;  --unknown-soft: #1f2736;
  --focus: #8db8ff;  --series: #8db8ff;
  --shadow: 0 0 0 0 transparent;  --shadow-nav: 0 10px 30px rgb(0 0 0 / 50%);  --shadow-sheet: 0 -12px 40px rgb(0 0 0 / 50%);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* The card kit (the b- names are shared by the site and the app; nothing else in either stylesheet may reuse them) */
.wm { display: inline-block; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.wm i { color: var(--orange); font-style: normal; }
.b-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-width: 0; min-height: 15rem; padding: 1.75rem; border-radius: var(--radius-panel);
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.b-night { background: var(--hero-from); color: var(--hero-ink); border-color: var(--hero-edge); }
.b-orange { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.b-sky { background: var(--sky); color: var(--navy); border-color: var(--sky); }
.b-paper { background: var(--card-paper); color: var(--card-paper-ink); border-color: var(--card-paper-edge); }
.b-label { font-size: .8rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.b-orange .b-label, .b-sky .b-label { opacity: 1; }
.b-big { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.03; text-wrap: balance; }
.b-price { font-size: clamp(3.4rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; }
.b-terms { color: #1f5fd1; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.b-night .b-terms { color: var(--sky); }
.b-fine { font-size: .95rem; font-weight: 550; opacity: .72; }
.b-chip { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-radius: 1.1rem; background: #0e1420; color: #f6f3ec; font-size: 1.05rem; }
.b-chip b { margin-right: auto; font-weight: 800; letter-spacing: -.02em; }
.b-dot { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--online); }
.b-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .8rem 1.6rem; border: 2px solid transparent; border-radius: var(--radius-button);
  font: inherit; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; text-decoration: none; cursor: pointer; }
.b-btn-primary { background: var(--orange); color: var(--navy); }
.b-btn-primary:hover { background: var(--orange-hover); }
.b-btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.b-btn-ghost:hover { background: rgb(128 128 128 / 14%); }