/* Chester — the house language, in one place.
 *
 * Taken from wonder.hereandmore.com/chester and already worn by mail: a
 * paper-white ground, a reading face for anything read at length, sans for the
 * chrome, hairlines instead of boxes, one small radius, and colour held back to
 * small accents. mail.css lifted these values by hand in July; this file exists
 * so the next surface does not have to lift them again, and so a change to the
 * language happens once rather than five times.
 *
 * HOW A SURFACE ADOPTS IT. Every surface here already names its own tokens
 * (--bg, --ink, --line, --tint …) and every rule is written against those names.
 * So a surface links this file and then maps its own names onto these values in
 * its own :root. Nothing else changes: no rule is rewritten, and a surface can
 * be reverted by deleting its map block.
 *
 * CONTRAST IS MEASURED, NOT ASSUMED. tests/audit_rooms_design.py holds text to
 * 4.5:1 and hairlines to 1.2:1, computed from the declared tokens. Chester's own
 * --muted #a3a3a3 is 2.52:1 on white -- fine for his decoration, illegal for our
 * data -- which is why --ch-body is the floor for anything a person must read.
 * Ratios on --ch-bg #ffffff:
 *   --ch-ink   #171717  15.9:1     --ch-ink-2 #262626  13.2:1
 *   --ch-body  #737373   4.74:1    --ch-muted #a3a3a3   2.52:1  decoration ONLY
 *   --ch-line  #e5e5e5   1.27:1    hairline, above the 1.2 floor
 */
/* NIGHT IS THE HOUSE DEFAULT (2026-07-31). The estate wears night on every
 * device — the OS preference no longer chooses the ground. The paper set
 * survives intact in :root[data-theme="light"], reachable only by an explicit
 * act, and print still forces paper (X6). Ratios on the night ground #0f0f10:
 *   --ch-ink 16.4:1   --ch-ink-2 13.1:1   --ch-body 5.1:1   --ch-line 1.31:1 */
:root{
  /* ground */
  --ch-bg:#0f0f10; --ch-soft:#161618; --ch-soft-2:#1c1c1f; --ch-card:#161618;
  /* ink */
  --ch-ink:#ededed; --ch-ink-2:#d4d4d4; --ch-body:#9a9a9a; --ch-muted:#6f6f6f;
  /* line */
  --ch-line:#2a2a2d; --ch-line-2:#3a3a3e;
  /* one radius, and a larger one for sheets */
  --ch-radius:10px; --ch-radius-lg:14px; --ch-radius-pill:999px;
  /* motion — the same curves the rest of the estate already uses */
  --ch-ease:cubic-bezier(.22,1,.36,1); --ch-ease-out:cubic-bezier(.16,1,.3,1);
  /* type: a reading face for prose, sans for chrome, mono for numbers */
  --ch-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",Georgia,serif;
  --ch-read:Optima,Seravek,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --ch-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ch-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* his link decorations — accents, never surfaces */
  --ch-orange:#fb923c; --ch-sky:#38bdf8; --ch-rose:#fb7185; --ch-lime:#a3e635;
  --ch-purple:#c084fc; --ch-fuchsia:#e879f9; --ch-teal:#2dd4bf; --ch-amber:#fbbf24;
  /* states: light-on-dark twins; the darkened-for-paper ramp lives in the
     day toggle below */
  --ch-ok:#4ade80; --ch-warn:#fbbf24; --ch-bad:#f87171;
}

/* ── night ──────────────────────────────────────────────────────────────────
 * Chester's own page is light only. It also does not run at 2am on someone's
 * phone, which HERE does. mail already shipped a dark theme; when the other
 * surfaces adopted this file they lost theirs, so a member opening HERE in bed
 * got a full-screen white flash. This restores it in ONE place: every surface
 * maps its own names onto these tokens, so inverting them here inverts all of
 * them, and nothing needs a second dark stylesheet.
 *
 * The language does not change at night -- reading face, hairlines, one radius,
 * colour held back. Only the ground and the ink trade places.
 * Measured on --ch-bg #0f0f10: --ch-ink 16.4:1, --ch-ink-2 13.1:1,
 * --ch-body 5.1:1, --ch-line 1.31:1 (above the 1.2 hairline floor).
 *
 * TINTS ARE TOKENS, not literals, for the same reason: a tint lifts a surface
 * off its ground, so it must flip with the ground. Ink alpha on paper, white
 * alpha at night.
 */
:root{
  --ch-tint:rgba(255,255,255,.06); --ch-tint-2:rgba(255,255,255,.10); --ch-tint-3:rgba(255,255,255,.16);
  /* the focus ring is a UI boundary: 3:1 minimum against its own ground */
  --ch-focus:#7cc4f0;
}
@media (prefers-color-scheme:dark){
  :root{
    --ch-bg:#0f0f10; --ch-soft:#161618; --ch-soft-2:#1c1c1f; --ch-card:#161618;
    --ch-ink:#ededed; --ch-ink-2:#d4d4d4; --ch-body:#9a9a9a; --ch-muted:#6f6f6f;
    --ch-line:#2a2a2d; --ch-line-2:#3a3a3e;
    --ch-tint:rgba(255,255,255,.06); --ch-tint-2:rgba(255,255,255,.10); --ch-tint-3:rgba(255,255,255,.16);
    /* his decorations lift a little off a dark ground; the states are the
       light-on-dark twins of the darkened ramp above */
    --ch-ok:#4ade80; --ch-warn:#fbbf24; --ch-bad:#f87171;
    --ch-focus:#7cc4f0;   /* 8.0:1 on the night ground; #0369a1 is 2.2:1 there */
  }
}

/* ── the viewer's own choice ────────────────────────────────────────────────
 * mail lets a person pick light or dark and stamps data-theme on the root
 * (surface/mail/theme.js). A token file that only answers the OS cannot serve
 * that: choosing light inside mail would still hand back the OS's night. So the
 * attribute wins over the media query, in both directions, and an unset
 * attribute falls back to the OS exactly as before.
 */
:root[data-theme="dark"]{
  --ch-bg:#0f0f10; --ch-soft:#161618; --ch-soft-2:#1c1c1f; --ch-card:#161618;
  --ch-ink:#ededed; --ch-ink-2:#d4d4d4; --ch-body:#9a9a9a; --ch-muted:#6f6f6f;
  --ch-line:#2a2a2d; --ch-line-2:#3a3a3e;
  --ch-tint:rgba(255,255,255,.06); --ch-tint-2:rgba(255,255,255,.10); --ch-tint-3:rgba(255,255,255,.16);
  --ch-ok:#4ade80; --ch-warn:#fbbf24; --ch-bad:#f87171; --ch-focus:#7cc4f0;
}
:root[data-theme="light"]{
  --ch-bg:#ffffff; --ch-soft:#fafafa; --ch-soft-2:#f5f5f5; --ch-card:#fafafa;
  --ch-ink:#171717; --ch-ink-2:#262626; --ch-body:#676767; --ch-muted:#a3a3a3;
  --ch-line:#e5e5e5; --ch-line-2:#d4d4d4;
  --ch-tint:rgba(23,23,23,.05); --ch-tint-2:rgba(23,23,23,.09); --ch-tint-3:rgba(23,23,23,.14);
  --ch-ok:#166534; --ch-warn:#92400e; --ch-bad:#b91c1c; --ch-focus:#0369a1;
}

/* ── X1: the first paint ────────────────────────────────────────────────────
 * The theme lives in this stylesheet, which arrives after the HTML, so until it
 * lands the browser paints its own default canvas -- white. At night that is a
 * flashbulb on every navigation. color-scheme tells the browser which canvas to
 * use BEFORE any of our CSS is parsed, so the first paint is already right.
 * The surfaces also carry <meta name="color-scheme"> for the same reason one
 * step earlier: the meta is read during head parsing, before this file returns.
 */
:root{ color-scheme: dark; }
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* ── X4: an act you cannot undo must not look like one you do daily ─────────
 * Ink is the primary, which is right -- but it had become the shape of every
 * committing action, so revoking a password wore the same black pill as
 * claiming an address. Weight still marks the ordinary primary; colour marks
 * the irreversible one, and it keeps the outline so it never reads as the
 * obvious next step.
 */
.ch-destructive{
  background:none; color:var(--ch-bad); border:1px solid var(--ch-line-2);
  border-radius:var(--ch-radius); font-weight:600; cursor:pointer;
  transition:border-color .15s var(--ch-ease),background .15s var(--ch-ease);
}
.ch-destructive:hover{ border-color:var(--ch-bad); background:var(--ch-tint); }
.ch-destructive:focus-visible{ outline:2px solid var(--ch-focus); outline-offset:2px; }

/* ── X3: figures you compare must line up ───────────────────────────────────
 * Proportional digits have different widths, so a column of them wanders.
 * Anything scanned or compared takes mono with tabular figures; the unit steps
 * back so the figure leads.
 */
.ch-num{ font-family:var(--ch-mono); font-variant-numeric:tabular-nums; }
.ch-num .unit,.ch-unit{ color:var(--ch-muted); font-family:var(--ch-sans); font-size:.82em; margin-left:3px; }

/* ── X6: paper is paper ─────────────────────────────────────────────────────
 * No surface declared a print style, so printing or saving a PDF at night
 * produced white text on a black page -- unreadable, and a cartridge of ink.
 * Print forces the paper ground whatever the screen wears, drops the chrome
 * that means nothing on paper, and keeps the hairlines that carry structure.
 */
@media print{
  :root{
    color-scheme: light;
    --ch-bg:#ffffff; --ch-soft:#ffffff; --ch-soft-2:#ffffff; --ch-card:#ffffff;
    --ch-ink:#000000; --ch-ink-2:#1a1a1a; --ch-body:#333333; --ch-muted:#555555;
    --ch-line:#cccccc; --ch-line-2:#999999;
    /* the states must come back to the paper ramp: night defaults would print
       1.7:1 green on white */
    --ch-ok:#166534; --ch-warn:#92400e; --ch-bad:#b91c1c; --ch-focus:#0369a1;
    --ch-tint:rgba(0,0,0,.04); --ch-tint-2:rgba(0,0,0,.07); --ch-tint-3:rgba(0,0,0,.11);
  }
  body{ background:#fff !important; color:#000 !important; }
  /* chrome has no meaning on a sheet of paper */
  .tabbar,#tabbar,.fab,.aurora,.grain,.pet,#pet,#ask,.sheetbk,nav.rail .mk{ display:none !important; }
  a{ text-decoration:underline }
  /* a card should not cost a border-box of toner */
  .card,.mc,.herecard{ box-shadow:none !important; break-inside:avoid }
}

/* ── V5: a scale, so the sixth size has an answer before anyone asks ────────
 * The sizes in use arrived one decision at a time -- 32, 27, 17, 13, 15 across
 * three faces, with no relationship between neighbouring steps. Each was chosen
 * carefully, which is why it reads well, but nothing held it together. These
 * steps sit on ~1.28, in the reading face for anything read and sans for chrome.
 */
:root{
  --ch-t1:28px;   /* the page's own name        */
  --ch-t2:21px;   /* a section that owns a card */
  --ch-t3:17px;   /* a heading inside one       */
  --ch-t4:13px;   /* a label                    */
  --ch-body-size:15px;
}

/* ── V3: copying an address should look like part of the page ───────────────
 * Selection was the operating system's blue -- a colour belonging to no one's
 * design, and loud on the night ground. An address is copied far more often
 * than it is read, so the highlight is quiet and ours.
 */
::selection{ background:var(--ch-soft-2); color:var(--ch-ink); }
::-moz-selection{ background:var(--ch-soft-2); color:var(--ch-ink); }

/* ── V4: say you are leaving before the click, not after ────────────────────
 * These surfaces span several origins and one of them signs you in, so an
 * outbound link should not look identical to an in-page one. The mark is on the
 * link, not a tooltip: it is readable, it copies, and it survives a screenshot.
 * Same-family hosts (mail., everything.) are not marked -- they are still us.
 */
a[href^="http"]:not([href*="hereandmore.com"]):not(.ch-nomark)::after{
  content:" \2197"; color:var(--ch-muted); font-size:.85em; text-decoration:none;
}
a[href^="http"]:not([href*="hereandmore.com"]):hover{ text-decoration-color:var(--ch-ink); }

/* ── V1: press-blocked must never look like paint-broken ────────────────────
 * A primary faded to 35% composites to grey-on-grey at night and reads as a
 * rendering fault. A disabled control gets its OWN quiet treatment, at full
 * opacity, so it looks deliberate -- and it should be accompanied by a line
 * saying what would enable it.
 */
.ch-disabled,button:disabled.ch-btn{
  opacity:1; background:var(--ch-soft-2); color:var(--ch-muted);
  border:1px solid var(--ch-line); cursor:not-allowed;
}
.ch-hint{ font:400 12.5px/1.5 var(--ch-read); color:var(--ch-body); margin-top:7px; }