/* Design tokens.
 *
 * These were meeting-ops `app/src/theme.css` verbatim, and deliberately are no
 * longer. The palette travelled while the phone was a reduced cockpit; once the
 * arrangement became the platform's — a sunk page with the content floating on
 * it, which is what iOS calls a grouped list — the cockpit's flat indigo had
 * nothing to be a page *and* a card with. So: Slate, chosen from a rendered
 * comparison of five pairs in `specs/design/grouped.html`.
 *
 * Cooler than the platform's neutral grey, blue-grey ink rather than black, and
 * teal on top. It reads as an instrument rather than as a document, which is
 * what this is: something looked at for thirty seconds in a corridor.
 *
 * Two things did not change and are not negotiable:
 *
 *  · **Amber is the only colour-coded state.** More than 30 days since
 *    `last_raised`, drawn as a 3 px left edge. It is a fact about a row, not an
 *    accent, and it keeps its own hue.
 *  · **The density is the phone's.** The cockpit runs 9–11 px type in wide
 *    tables; at 390 pt that is unreadable and untappable. Type sizes here are
 *    iOS sizes and owe the cockpit nothing.
 *
 * Dark is the base because that is the theme this is used in most. Light is a
 * full design, not an inversion — the page is darker than the card in both, so
 * that the page recedes and the content lifts either way.
 */

:root {
  --bg:        #14181d;   /* the sunk page */
  --card:      #1e242b;   /* what floats on it */
  --inset:     #1a2027;
  --hover:     #262e37;
  --line:      #2a323b;   /* borders */
  --line-hard: #3d4753;
  --hair:      #333c47;   /* separators inside a card */

  --tx:  #eef3f7;
  --tx2: #c3cdd6;
  --tx3: #8b98a5;
  --tx4: #6f7d8a;

  --ac:      #40c4d8;
  --ac-lite: #7fd8e6;
  --ac-bg:   #26333b;

  --ok:    #43c98a;   /* swipe-to-done, sync healthy */
  --warn:  #f0a92a;   /* dormant past 30 days, queue pending */
  --bad:   #f4695f;   /* overdue */
  --on-ok: #06231a;   /* text on an --ok fill */

  --shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .25);
  --lift:   0 16px 30px rgba(0, 0, 0, .55);   /* a row picked up for reordering */

  --radius: 10px;     /* a grouped card */

  /* SF first, deliberately. These are iOS screens, and platform consistency is
   * a first-order criterion — see specs/ux.md §1. */
  --ios:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* iOS type scale. 44 pt is the floor for anything tappable. */
  --t-title:  25px;   /* large navigation title */
  --t-person: 19px;   /* a person's name in the header */
  --t-body:   15px;   /* topic titles — the thing actually being read */
  --t-task:   13px;
  --t-label:  11px;   /* section headers, uppercase */
  --t-meta:   10px;   /* mono: ages, counts, sync state */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f1f4f8;
    --card:      #ffffff;
    --inset:     #e9eef4;
    --hover:     #e6ecf3;
    --line:      #dde3ea;
    --line-hard: #c2cbd6;
    --hair:      #e8edf2;

    --tx:  #141c26;
    --tx2: #3c4855;
    --tx3: #75828f;
    --tx4: #94a1ae;

    --ac:      #2f9fb4;
    --ac-lite: #1c7f91;
    --ac-bg:   #e0eef2;

    --ok:    #2fa36b;
    --warn:  #c98a00;
    --bad:   #d1443c;
    --on-ok: #ffffff;

    --shadow: 0 10px 28px rgba(30, 44, 64, .10), 0 1px 2px rgba(30, 44, 64, .08);
    --lift:   0 14px 26px rgba(30, 44, 64, .20);
  }
}