/*
 * Kutter TG — the design language, and nothing that uses it.
 *
 * **This repository is upstream.** The system was drawn here and `DESIGN.md` at
 * the root is its argument. `kutter-graphics` carries a copy of this directory;
 * a token changes here first, in the same commit as the hash recorded in
 * `DESIGN.md`, and goes over there as a sync that carries the same bytes.
 * `npm run check:design` fails when the file and the record disagree, which is
 * what makes「the copy is the one that has been maintained」a thing that cannot
 * happen twice.
 *
 * Only `:root` lives in this file. A rule with a class or an element in it is
 * not the language, it is an app using the language, and the moment one lands
 * here the boundary this file exists to draw stops being checkable.
 *
 * ── When to stop vendoring and extract ──
 *
 * A third consumer, or a primitive that has to become a React component rather
 * than a class name. Until then a package is a third ruleset, a third CI and a
 * release step between changing a token and seeing it on screen, bought for 170
 * lines with one maintainer. At that point this directory is already the
 * package and the extraction is a `git mv`.
 */
/*
 * Kutter TG — the tokens. See `DESIGN.md` at the repo root for the argument;
 * this file is only the values and the rules written against them.
 *
 * The system is a cassette deck in Dieter Rams' Braun language, and its neutrals
 * are named after the parts of one, not after a number on a ramp. The name is
 * the rule: `--housing` is the lacquered case, so it is the page and nothing
 * else; `--plate` is a control plate mounted on it, so it is every panel and
 * pane; `--well` is a recess milled into a plate, so it is what you look *into*
 * — the timeline, fields, logs, the counter window. `--surface-700` could never
 * say that, which is why it is gone.
 *
 * Two units ship. HOUSING is the light one — the TG 60's warm white lacquer, and
 * the default, because that is the machine this is drawn from. ANTHRACITE is the
 * dark one, Braun's warm studio black, for a dark room. They are the same ramp
 * read from opposite ends, which is what makes the second unit a block of values
 * rather than a second stylesheet.
 *
 * The premise that survives from PLAN.md §7 unchanged: the waveform is the
 * loudest thing on screen in both units, and the chrome around it recedes. That
 * was an argument about the timeline; it turns out to be Rams' argument about
 * the tape and the housing.
 */

/* ── HOUSING · the light unit ─────────────────────────────────────────────── */
:root {
  /* The housing ramp, from raised to recessed. */
  --plate:   #f4f2ec;   /* a control plate: panels, panes, cards           */
  --housing: #e8e5de;   /* the lacquered case: the page                    */
  --key:     #dedad1;   /* the moulded face of a mechanical key            */
  --well:    #d8d3c8;   /* a milled recess: timeline, fields, logs         */
  --line:    #c4bfb2;   /* the seam between plates                         */
  --engrave: #b3ad9e;   /* the engraved score around a well or a key       */

  /* Three weights of attention, and deliberately no fourth: `--ink-faint` is
   * the quietest the system goes and still clears 4.5:1 on the housing. */
  --ink:       #1b1a17;
  --ink-dim:   #55524a;
  --ink-faint: #6b6659;

  /* The one accent. Braun's record orange, and it marks exactly three things:
   * the active transport state, the primary action, and a cut. */
  --signal:      #d7541e;
  /* The same orange for *text* under 18px, where the fill fails contrast.
   * Fills use `--signal`; words use `--signal-ink`. */
  --signal-ink:  #a83a10;
  /* Signal composited into the plate — opaque, not translucent, because the run
   * of words under a selection has to stay checkable. */
  --signal-wash: #f0dacd;
  /* The legend printed on an orange key. Never white: white on this fails. */
  --on-signal:   #16130f;

  /* The three pilot lamps. State only — never a fill, never an accent. */
  --lamp-ready:   #35682f;
  --lamp-caution: #7c5a0c;
  --lamp-fault:   #a3221c;

  /* Behind the help sheet. */
  --scrim: rgba(28, 27, 24, .55);

  color-scheme: light;
}

/* ── ANTHRACITE · the dark unit ───────────────────────────────────────────── */
:root[data-theme='dark'] {
  --plate:   #26241f;
  --housing: #1c1b18;   /* warm studio black, never a blue-black */
  --key:     #2f2c27;
  --well:    #131211;   /* a recess is the darkest thing on the panel, in both units */
  --line:    #3b3833;
  --engrave: #4a4740;

  --ink:       #e9e5dc;
  --ink-dim:   #b0aa9d;
  /* Checked against `--plate`, not `--housing`: the plate is the lightest ground
   * this ever sits on, and it is where a card's meta text lives. #8b857a clears
   * 4.5:1 on the housing and only 4.23:1 here, which is the wrong way round. */
  --ink-faint: #948e82;

  /* The accents move up in value and keep their hue: `#d7541e` carries on
   * lacquer and goes muddy on black. */
  --signal:      #f2662b;
  /* A lighter tint here, because the dark unit's key faces sit close enough in
   * value to the fill orange to fail against it. */
  --signal-ink:  #f97a45;
  --signal-wash: #4f3121;
  --on-signal:   #16130f;

  --lamp-ready:   #7fb05a;
  --lamp-caution: #dfa93c;
  --lamp-fault:   #e0553f;

  --scrim: rgba(10, 10, 9, .60);

  color-scheme: dark;
}

/* ── the grid, the rail, the scale ────────────────────────────────────────── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Every control that sits in a row shares one height and one vertical centre.
   * A transport bar is a row of identical modules, exactly like the key row on
   * a deck, and nothing may be 2 px taller than its neighbour. */
  --rail: 28px;
  --control-h: 30px;

  /* Corners are broken by the mould, not rounded by choice: 2 px on every
   * rectangular control, 3 px on the larger plates, 0 where two elements butt
   * into one machined seam. `--radius-full` is only ever a lamp. */
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 3px;
  --radius-full: 9999px;

  /* The nine-level type scale. `--type-0` is the legend-sm voice and the floor;
   * nothing in the app is allowed to invent a tenth. */
  --type-0: 10px;
  --type-1: 11px;
  --type-2: 12px;
  --type-3: 13px;
  --type-4: 15px;
  --type-5: 17px;
  --type-6: 20px;
  --type-7: 24px;
  --type-8: 28px;

  /* Key travel: the one dynamic depth cue in a system with no shadows. A hard
   * 2 px offset with zero blur, which the foreground translates onto. Not 4 px —
   * a mechanical key has a short, definite throw, and 4 px reads as a card
   * sliding rather than a switch clicking. */
  --press-offset: 2px;
  --press-back: var(--engrave);
}

/* ── what the two apps share by name ──────────────────────────────────────
 *
 * Generalised in `kutter-graphics` and adopted back. A key is a key on a
 * transport bar and a control everywhere else, so `--key-h` is `--control-h`
 * here now and at its call site.
 *
 * `--icon` and `--measure` have no call site in this app yet. They are here
 * because this file is the *language* rather than an inventory of what one
 * screen happens to use — and a shared layer that holds only the intersection
 * is a layer that has to be edited in two places the first time either app
 * reaches for the other's token.
 */
:root {
  /* The focus treatment, written out by hand in eight places before this. The
   * house ring, never the browser's: a blue halo on this palette is the one
   * thing on the screen that did not come from the unit. */
  --ring: 2px solid var(--signal);
  --ring-offset: 1px;

  /* An icon box. One size, so a row of them shares a baseline. */
  --icon: 14px;

  /* The widest a column of prose is allowed to get. */
  --measure: 68rem;
}

/*
 * Kutter TG — the element defaults every screen inherits.
 *
 * The other half of the shared layer, and the line between them is what a rule
 * *selects*: `tokens.css` is `:root` and only `:root`; this is bare elements and
 * only bare elements. Anything with a class on it belongs to the app that
 * draws it, which is `styles.css` next door.
 *
 * Upstream, hashed and synced exactly as `tokens.css` is — see its header.
 */

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--housing);
  color: var(--ink);
  font: var(--type-4)/1.55 Inter, Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Korean does not break on spaces the way English does. Without keep-all a
   * label wraps in the middle of 「이음새」 and the word stops being readable. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/*
 * The account site, written against the tokens next door and adding no values.
 *
 * Every colour, spacing step and radius here is a `var()`. A hex code in this
 * file would be the design language forking quietly on a surface nobody looks
 * at often — which is exactly how the `kutter-graphics` copy drifted, and the
 * reason the copies in `public/design/` are byte-compared in a test.
 *
 * The names carry the rule, so this file obeys them: `--housing` is the page,
 * `--plate` is a panel mounted on it, `--well` is a recess you look *into*. A
 * field and a meter are wells; a panel is never one.
 */

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-8);
}

header.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

header.masthead .wordmark {
  font-size: var(--type-6);
  font-weight: 600;
  letter-spacing: -0.01em;
}

header.masthead a,
footer a {
  font-size: var(--type-3);
  color: var(--ink-dim);
}

.panel {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.panel h2 {
  font-size: var(--type-5);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.panel p.lede {
  color: var(--ink-dim);
  font-size: var(--type-3);
  margin: 0 0 var(--space-6);
}

label {
  display: block;
  font-size: var(--type-3);
  color: var(--ink-dim);
  margin-bottom: var(--space-1);
}

input[type='email'],
input[type='password'],
input[type='text'] {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: var(--ring);
  outline-offset: var(--ring-offset);
}

button {
  font: inherit;
  font-weight: 550;
  min-height: var(--control-h);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  background: var(--signal);
  color: var(--on-signal);
  cursor: pointer;
}

button:active { transform: translateY(var(--press-offset)); }

button.quiet {
  background: var(--key);
  border-color: var(--line);
  color: var(--ink);
}

/* The one destructive control on the site. A fault lamp and not a red button:
 * revoking is the remedy for a lost laptop, and somebody reaching for it is
 * already having a bad enough day without being shouted at. */
button.undo {
  background: var(--key);
  border-color: var(--line);
  color: var(--lamp-fault);
}

/* ── the allowance ──────────────────────────────────────────────────────── */

.allowance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.allowance .left {
  font-size: var(--type-8);
  font-variant-numeric: tabular-nums;
}

.allowance .of {
  color: var(--ink-dim);
  font-size: var(--type-3);
  font-variant-numeric: tabular-nums;
}

/* A counter window: milled into the plate, so it is a well. */
.meter {
  height: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--well);
  border: 1px solid var(--line);
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  background: var(--lamp-ready);
}

.meter[data-left='little'] > span { background: var(--lamp-caution); }
.meter[data-left='none'] > span { background: var(--lamp-fault); }

/* ── rows, notes, refusals ──────────────────────────────────────────────── */

dl.rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-6);
  font-size: var(--type-3);
}

dl.rows dt { color: var(--ink-dim); }
dl.rows dd { margin: 0; }

.note,
.refusal,
.done {
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--type-3);
  border: 1px solid var(--line);
}

.note {
  background: var(--well);
  color: var(--ink-dim);
}

.refusal {
  background: var(--signal-wash);
  border-color: var(--lamp-fault);
  color: var(--ink);
}

.done {
  background: var(--well);
  color: var(--ink);
}

footer {
  color: var(--ink-faint);
  font-size: var(--type-2);
  text-align: center;
  padding-bottom: var(--space-8);
}

@media (max-width: 30rem) {
  main { padding: var(--space-6) var(--space-3) var(--space-8); }
  .panel { padding: var(--space-4); }
}