/* Tokens the partner routes need beyond design/palette.css and the site's own
 * light layer. Same --resurs-* namespace, same rule: a component never carries
 * a literal, so a whole colour scheme still swaps as one layer. Ported from
 * mocks/pages/d/pages-d.tokens.css; the slider tokens went with the v2
 * calculator, which his v1 pick does not carry. These lines belong in
 * design/palette.css once the whole site is on master and one lane owns it. */
:root {
  /* The table: a pale rounded band per row, the selected tier on the tint. */
  --resurs-band: var(--resurs-surface);
  --resurs-band-selected: var(--resurs-tint);
  --resurs-band-hover-edge: var(--resurs-hairline);
  --resurs-band-radius: var(--resurs-radius-card);

  /* The segmented pill: the VTB switch, one selected segment on white. */
  --resurs-segment-ground: var(--resurs-surface);
  --resurs-segment-selected: var(--resurs-ground);
  --resurs-segment-selected-edge: var(--resurs-hairline);
  --resurs-segment-ink: var(--resurs-ink-muted);
  --resurs-segment-ink-selected: var(--resurs-ink);

  /* Fields: the VTB field is a filled rounded box, no outline until focus. */
  --resurs-field-ground: var(--resurs-surface);
  --resurs-field-ground-focus: var(--resurs-ground);
  --resurs-field-edge: transparent;
  --resurs-field-edge-focus: var(--resurs-accent);
  --resurs-field-ink-hint: var(--resurs-ink-muted);
  --resurs-field-radius: var(--resurs-radius-tile);
  --resurs-field-height: 52px;

  /* The invalid and the saved states: two colours no other layer declares. */
  --resurs-error: #C2281E;
  --resurs-error-soft: #FCEBEA;
  --resurs-ok: #1B7F4C;
  --resurs-ok-soft: #E6F5EC;


  /* Type the pages add: the level word is the largest thing after the title. */
  --resurs-size-level: 44px;
  --resurs-size-page-title: 48px;
  --resurs-size-cell: 15px;
  --resurs-size-step-num: 40px;

  /* Rhythm of the bands. */
  --resurs-band-pad: 18px 22px;
  --resurs-gap-band: 10px;
  --resurs-gap-block: 64px;
  --resurs-table-min: 880px;
}
@media (max-width: 1080px) {
  :root { --resurs-size-level: 36px; --resurs-size-page-title: 40px; --resurs-gap-block: 48px; --resurs-size-step-num: 34px; }
}
@media (max-width: 560px) {
  :root { --resurs-size-level: 30px; --resurs-size-page-title: 32px; --resurs-gap-block: 40px; --resurs-band-pad: 14px 16px; --resurs-size-step-num: 30px; --resurs-field-height: 48px; }
}