/* 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: #95a2ae;
  --tx4: #8b98a5;

  --ac:      #40c4d8;
  --ac-lite: #7fd8e6;
  --ac-bg:   #26333b;
  /* **The sub-group band, and it is deliberately not the accent** — C1 in
   * specs/design/band-colour.html.
   *
   * The band was `--ac-bg` with `--ac` on it, and two things were wrong with
   * that. The measured one: in the light theme the name came out at **2.62:1**
   * against its own ground where the dark theme's is 6.24, and the fill was
   * **1.08:1** against the sunk page — near enough its own colour that the band
   * read as a hole punched through the card rather than as a heading on it.
   * `--ac-bg` was chosen against a dark card and put on a light one without
   * being looked at, which is the sheet's own lesson on a third noun: *the
   * light theme is not the dark one inverted.*
   *
   * The one that decided it: **the accent in this application means *you can
   * touch this***, and a band cannot be touched. So the fix is not a better
   * teal — it is the rule being applied. What tells the two levels apart is
   * then ground and case rather than hue: a name in full ink on the card, a
   * label in mono uppercase on a step of grey.
   *
   * A step and not a shade of the accent, so each theme can choose its own:
   * lighter than the card in dark, darker than it in light, and never the
   * page's colour in either. */
  --band:     #2b333c;
  --band-ink: #c3cdd6;
  --band-ct:  #a7b3bf;
  /* **What a meeting came from, and the one place a tint says a fact rather
   * than an invitation** — B1 in specs/design/meeting-screen-corrected.html.
   *
   * Reported as *use a different colour for quill and manual, now it is
   * confusing*: they were two grey words in one grey line, told apart only by
   * reading them. A recorded meeting wears a small filled pill and a meeting
   * started by hand wears no word at all, so the two are told apart by
   * presence rather than by reading — and the commonest case, recorded, is the
   * one that shows.
   *
   * **It bends the rule directly above it, deliberately and once.** The accent
   * means *you can touch this*, and this pill cannot be touched: what it says
   * is *where this came from*, which is a fact about the row rather than an
   * opinion about the work. The band's own finding is what makes the word its
   * own token instead of `--ac` on `--ac-bg` — that pair is **2.62:1** in the
   * light theme — so the ink is dark on the tint in light and bright on it in
   * dark, and `contrast.test.js` holds both.
   */
  --src-ink:  #7fd8e6;
  /* **Work, against people** — D1 in specs/design/refinements-after-0150.html.
   * The second hue this palette has ever had, and it earns it by saying which
   * *kind* of thing a mark is rather than having an opinion about the data —
   * which is what dormancy's amber was, and why that went. Teal is somebody;
   * violet is the work they asked for. Two is a distinction anybody holds. */
  --work:    #b9a5ee;
  --work-bg: #31294a;

  --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 */

  /* One plane up: what a sheet is made of — specs/design/sheets.html.
   *
   * A sheet drawn in `--bg` over a page drawn in `--bg` is a sheet visible only
   * by its shadow, and the card inside it is the same `--card` as the rows
   * behind — so the relief the whole design rests on flattens exactly where the
   * attention is meant to be. These three are what the sheet redefines `--bg`,
   * `--card` and `--line` *to*, so every piece inside it recomputes one plane up
   * and keeps the relief it had, rather than each being restyled by hand.
   *
   * The light theme is not the dark one inverted here either: on white there is
   * nowhere brighter to go, so the sheet stays white and the plane is made by
   * the page going darker under it and by a border.
   *
   * **`--inset` and `--hover` belong to the set, and the round that wrote it
   * missed them.** The rule's own sentence is that restyling each piece by
   * hand gets most of them and misses the next one somebody adds — and what
   * it missed was two lines below itself. Measured in the dark theme:
   * `--inset` is `#1a2027` and `--lift-bg` is `#1b2128`, one point a channel,
   * so every sunk control inside a sheet came out on the sheet's own ground.
   * The Bento meeting's card is where it finally showed — its verbs read as
   * bare words rather than as pills. Invisible in the light theme, where
   * `#e9eef4` on `#ffffff` is a real step, which is why it stood for
   * rounds. */
  --lift-bg:   #1b2128;
  --lift-card: #262d36;
  --lift-line: #39434f;
  --lift-inset: #212830;
  --lift-hover: #2f3842;

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

  /* How far a card sits from the edge of the page. The gutter is what makes the
   * page read as a page rather than as the background of a table, so it is the
   * one metric every screen has to agree on: `.scroll` spends it, and the
   * navigation bar spends it plus the four pixels a section label is inset by,
   * so a title and the label under it line up. */
  --gutter: 17px;

  /* 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;

  /* One number, and the whole scale below is drawn from it.
   *
   * The proportions are the phone's and are settled; what is not settled is how
   * big the whole thing is, because the same bundle is read at arm's length on a
   * desktop as well as in a corridor at 390 pt. So a runtime raises this and
   * every rank moves together — `app.css` does it for `mac` and nothing else
   * ever touches it. **The ranks themselves are declared once**, here, for the
   * reason a theme is not allowed to restate them either: a second copy under
   * another selector can only ever end up disagreeing with the first, which is
   * what it did the one time it existed. */
  --scale: 1;

  /* iOS type scale. 44 pt is the floor for anything tappable.
   *
   * These are the platform's own sizes and no longer a step under them at every
   * rank. 17 px is what iOS calls body, and `--t-body` is still that.
   *
   * **The two ranks that dropped were dropped from the tuner**, and they are the
   * owner's numbers rather than a proposal — `specs/design/type-and-space.html`
   * is the page they were dragged on, and this block is what it writes back.
   * `--t-task` went 15 → 14 and `--t-meta` 12 → 10.
   *
   * **The mono rank is a reversal, and it is named rather than quietly taken.**
   * The sentence that used to end this paragraph said *10 px of SF Mono is where
   * an age stops being a number and becomes a smudge meaning "old"*, which is
   * why it had been raised to 12 in the first place. It is back at 10. What
   * changed under that argument is the machine: this application now runs at
   * `--scale: 1.5` on a Mac, where 10 comes out at 15 and is not a smudge at
   * all — and the tuner has a Phone setting, so the phone's 10 was on screen
   * when the number was chosen. The old reading is left in this paragraph rather
   * than deleted, because it is the thing to look at first if an age ever
   * becomes hard to read on a phone. */
  --t-title:  calc(30px * var(--scale));   /* large navigation title */
  --t-person: calc(22px * var(--scale));   /* a person's name in the header */
  --t-body:   calc(17px * var(--scale));   /* body — the platform's own rank */
  --t-task:   calc(14px * var(--scale));
  --t-label:  calc(12px * var(--scale));   /* section headers, uppercase */
  --t-meta:   calc(10px * var(--scale));   /* mono: ages, counts, sync state */

  /* **The two levels of a grouped list, told apart by size as well as by kind.**
   *
   * A section's name and the topic titles under it were both `--t-body`, and A1
   * in specs/design/two-levels.html is why: the outer level stopped speaking the
   * label's dialect — mono, uppercase, 12 px — and became a *name*, at body, in
   * sentence case and full ink. That fixed a hierarchy that was drawn upside
   * down, and it left the two ranks the same size, separated by case and weight
   * alone.
   *
   * On a phone that reads correctly. On a Mac at `--scale: 1.5` both are 25.5 px
   * of near-identical type, and reported as such: the grouping stops being
   * legible at a glance because nothing in the *size* says which is the heading.
   *
   * **The heading went up rather than the row going down**, which is the
   * owner's answer off the tuner and the better of the two. The first pass
   * shipped 17/16 — a one-point step, where the weight was doing nearly all the
   * work — and the way to widen that was either to push the row under the
   * platform's body rank or to let the name be a heading. 20/16 is the second,
   * so **`a topic title is body` is not narrowed after all**: `--t-row` at 16
   * is a point under body and the sentence that argued for 17 is about
   * `--t-body`, which has not moved. The name is simply louder than the things
   * under it, which is what a heading is.
   *
   * Both are here rather than at their call sites because they are the round's
   * whole tunable surface — see `specs/design/type-and-space.html`, which is a
   * live tuner over exactly these six values and writes this block back. */
  --t-head: calc(20px * var(--scale));   /* a section's name: a person, a group, an initiative */
  --t-row:  calc(16px * var(--scale));   /* a topic title on a row */

  /* **A row's own vertical padding, and the air above a section label.**
   *
   * `--row-pad` was declared on `.item` and is here now for the reason above:
   * one block holds everything the tuner moves. `.item.tight` still takes it to
   * 10, which is the platform's 44 pt floor exactly.
   *
   * **14 and 18, and the round they came out of asked for *more* space.** The
   * first pass read that as the row and shipped 24 and 26; dragged on the tuner
   * against the real screen, the answer came back the other way — 14 inside a
   * row and 18 above a group. It is not a contradiction, it is what the heading
   * bought: with `--t-head` at 20 the *name* separates one group from the next,
   * so the air no longer has to, and rows that are not carrying that job read
   * better tight. A row is 50 px at the phone's scale, which still clears the
   * 44 pt floor.
   *
   * **S3's argument survives and is what to check against if this is reopened.**
   * specs/design/topic-spacing.html chose 20 over 16 so the gap *between* two
   * topics beats the gap *inside* one; at 14 that margin is thinner than it has
   * been, and what is holding it up is a heading rather than a measurement. */
  --row-pad: 14px;
  --sec-space: 18px;
}

@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;
    /* **Darkened twice, because the ramp could not be read at its foot** — the
     * pending decision the contrast check surfaced, taken, and then taken again
     * when the sweep was widened past the pair it was written for.
     *
     * The second round is the one worth reading. `--tx4` — the age on every
     * topic row, the count in every header, the mono meta line on every screen
     * — came out at **2.64:1 on a card and 2.39 on the page**, worse than the
     * band that started all of this and spent on far more of the application.
     * And there was **no room to fix it in place**: measured, the lightest
     * neutral that clears 4.5:1 against the sunk page is about where `--tx3`
     * already stood, so a fourth rank below it could not both exist and be
     * readable. The whole foot of the ramp had to move up.
     *
     * **What that costs is the spacing, and it is stated rather than
     * discovered.** The step from `--tx3` to `--tx4` was 2.04:1 in light and is
     * now 1.24 — a difference you can measure and can barely see. Four ranks
     * survive as tokens and as structure; as *shades* the bottom two are nearly
     * one. The better fix is not a colour at all — it is to stop spending one
     * token on both information (an age) and furniture (a chevron, a
     * placeholder), and that is an audit rather than a value.
     *
     * The original round's note follows, because its reasoning still holds for
     * the token it was about.
     *
     * `--tx3` is the summary under a topic title and the label over a section,
     * and at #75828f it came out at **3.93:1 on a white card and 3.56:1 on the
     * page** — below the floor for text that size, in exactly the way the band
     * was and on far more of the screen. Dark was never the problem: the same
     * token reads 6.1 and 5.5 there, which is what a palette written per theme
     * is *for* and what makes a value carried across from one an accident
     * rather than a decision.
     *
     * #5f6c7a was the smallest step that cleared both grounds with room to
     * spare — 5.37:1 on a card, 4.87:1 on the page. It is what `--tx4` wears
     * now; `--tx3` went one further to #515e6c (6.63 and 6.01) to leave it
     * somewhere to stand. */
    --tx3: #515e6c;
    --tx4: #5f6c7a;

    --ac:      #2f9fb4;
    --ac-lite: #1c7f91;
    --ac-bg:   #e0eef2;
    /* Darker than the card and clearly off the page, which is the pair the
     * accent tint could not be: the page is #f1f4f8 here. */
    --band:     #d9e1ea;
    --band-ink: #3c4855;
    --band-ct:  #495666;
    --src-ink:  #146070;
    /* Darkened rather than lightened, like every other pair here: on white there
     * is nowhere brighter to go. */
    --work:    #6b52ba;
    --work-bg: #ece7f8;

    --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);

    --lift-bg:   #ffffff;
    --lift-card: #f2f5f9;
    --lift-line: #dbe2ea;
    --lift-inset: #eef2f7;
    --lift-hover: #e4eaf2;
  }
}

/* The Appearance control in Settings — specs/design/sync-settings.html §3.
 *
 * `data-theme` has to win over the media query in *both* directions, which is
 * why light is repeated here rather than left to the block above: choosing
 * Light on a phone set to dark has to work as well as the other way round.
 * `system` removes the attribute and none of this applies, which is the whole
 * of the third value.
 *
 * The values are duplicated rather than routed through a second layer of custom
 * properties. One indirection to save one copy, in the file that is read to
 * find out what a colour *is*, is a bad trade. */
:root[data-theme="light"] {
  --bg:        #f1f4f8;
  --card:      #ffffff;
  --inset:     #e9eef4;
  --hover:     #e6ecf3;
  --line:      #dde3ea;
  --line-hard: #c2cbd6;
  --hair:      #e8edf2;

  --tx:  #141c26;
  --tx2: #3c4855;
  --tx3: #515e6c;
  --tx4: #5f6c7a;

  --ac:      #2f9fb4;
  --ac-lite: #1c7f91;
  --ac-bg:   #e0eef2;
  --band:     #d9e1ea;
  --band-ink: #3c4855;
  --band-ct:  #495666;
  --src-ink:  #146070;
  --work:    #6b52ba;
  --work-bg: #ece7f8;

  --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);

  --lift-bg:   #ffffff;
  --lift-card: #f2f5f9;
  --lift-line: #dbe2ea;
  --lift-inset: #eef2f7;
  --lift-hover: #e4eaf2;
}

:root[data-theme="dark"] {
  --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: #95a2ae;
  --tx4: #8b98a5;

  --ac:      #40c4d8;
  --ac-lite: #7fd8e6;
  --ac-bg:   #26333b;
  --band:     #2b333c;
  --band-ink: #c3cdd6;
  --band-ct:  #a7b3bf;
  --src-ink:  #7fd8e6;
  --work:    #b9a5ee;
  --work-bg: #31294a;

  --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 */

  /* One plane up: what a sheet is made of — specs/design/sheets.html.
   *
   * A sheet drawn in `--bg` over a page drawn in `--bg` is a sheet visible only
   * by its shadow, and the card inside it is the same `--card` as the rows
   * behind — so the relief the whole design rests on flattens exactly where the
   * attention is meant to be. These three are what the sheet redefines `--bg`,
   * `--card` and `--line` *to*, so every piece inside it recomputes one plane up
   * and keeps the relief it had, rather than each being restyled by hand.
   *
   * The light theme is not the dark one inverted here either: on white there is
   * nowhere brighter to go, so the sheet stays white and the plane is made by
   * the page going darker under it and by a border. */
  --lift-bg:   #1b2128;
  --lift-card: #262d36;
  --lift-line: #39434f;
  --lift-inset: #212830;
  --lift-hover: #2f3842;

  /* The radius, the gutter, the two families, `--scale` and the type scale are
   * not part of a palette and are deliberately *not* repeated here. A theme
   * changes what a thing is coloured and never how big it is, so a copy of the
   * scale under this selector could only ever do one thing: disagree with the
   * one above it. It did, for exactly as long as it existed. */
}