@layer components {
  :root {
    --color-success: oklch(var(--lch-green-dark));
    --color-info: oklch(var(--lch-blue-dark));
    --color-warning: oklch(var(--lch-yellow-dark));
    --color-error: oklch(var(--lch-red-dark));

    --color-success-text: oklch(var(--lch-green-darker));
    --color-info-text: oklch(var(--lch-blue-darker));
    --color-warning-text: oklch(var(--lch-yellow-darker));
    --color-error-text: oklch(var(--lch-red-darker));

    --color-success-button: oklch(var(--lch-green-dark));
    --color-error-button: oklch(var(--lch-red-dark));

    /* A warning as a ground, a step darker than the scale's so white on it reads at 4.5:1. Dark mode's sits under dark ink and already does. */
    --color-warning-filled: oklch(57% 0.156 60);
  }

  html[data-theme="dark"] {
    --color-warning-filled: var(--color-warning);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
      --color-warning-filled: var(--color-warning);
    }
  }

  .status {
    --status-color: var(--color-ink-dark);
    --status-text: var(--color-ink-dark);
    font-size: var(--text-small);
    color: var(--status-text);
    font-weight: 600;
    white-space: nowrap;
  }

  .status--success {
    --status-color: var(--color-success);
    --status-text: var(--color-success-text);
  }

  .status--info {
    --status-color: var(--color-info);
    --status-text: var(--color-info-text);
  }

  .status--warning {
    --status-color: var(--color-warning);
    --status-text: var(--color-warning-text);
  }

  .status--error {
    --status-color: var(--color-error);
    --status-text: var(--color-error-text);
  }

  .status--neutral {
    --status-color: var(--color-ink-dark);
    --status-text: var(--color-ink-dark);
  }

  .status--badge {
    padding: 0.25em 0.7em;
    border: var(--border);
    border-radius: 9999px;
    font-size: var(--text-small);
  }

  /* A verdict that has to be read at a glance: the status colour becomes the ground, and the
     only status still said in capitals. */
  .status--filled {
    padding: 0.35em 0.8em;
    border-radius: var(--radius-lg);
    font-size: var(--text-small);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-ink-inverted);
    background-color: var(--status-color);
  }

  .status--filled.status--warning {
    --status-color: var(--color-warning-filled);
  }

  /* As the filled warning's ground: a step darker in light mode only. */
  .status--filled.status--error {
    --status-color: oklch(57% 0.19 38);

    html[data-theme="dark"] & {
      --status-color: var(--color-error);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --status-color: var(--color-error);
      }
    }
  }

  .status--stamp {
    display: inline-block;
    rotate: -1.5deg;
  }

  /* A state that is off, said in a quieter colour. Never struck through: a line through
     "Unblocked" reads as the negation of the word, which is the opposite of what it says. */
  .status--muted {
    --status-color: var(--color-ink-dark);
    --status-text: var(--color-ink-dark);
  }

  /* A date, a person or a count beside a row's title, said quietly. Never a status: it has no
     colour of its own. */
  .chip {
    --icon-size: 1em;

    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.15em 0.6em;
    border-radius: var(--radius-md);
    background-color: var(--tint-ink-5);
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  /* A chip that opens the field it prints, with that field focused. */
  .chip--link {
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color var(--duration-medium) var(--ease-out-expo);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--tint-ink-10);
      }
    }
  }
}

@layer utilities {
  .txt-warning { color: color-mix(in oklch, var(--color-warning), var(--color-ink) 25%); }
}