/* ==========================================================================
   EZUI Colour (ezui-colour.css)

   Every colour EZUI uses, and nothing else: no rules and no selector beyond
   :root, so this file paints nothing by itself and can load in any order.
   A component points its own tokens at these; it never carries a hex.
   Every name says the token's job, not what it looks like.
   See EZY UI Colour.md.
   ========================================================================== */

:root {
  /* -- Four colours. Each is one hex; the rest of its family is that hex
     laid over white at a fixed strength, so changing the hex here changes
     the whole family. A colour has only the variants its components use:
     -soft-hover is a pale button, hovered, and destructive is the only
     pale button, so it is the only one with -soft-hover. -- */
  --ezui-accent: #006fff;
  --ezui-accent-hover:      color-mix(in srgb, var(--ezui-accent) 80%, #fff);
  --ezui-accent-soft:       color-mix(in srgb, var(--ezui-accent) 10%, #fff);
  --ezui-accent-soft-line:  color-mix(in srgb, var(--ezui-accent) 28%, #fff);

  --ezui-destructive: #e53935;
  --ezui-destructive-hover:      color-mix(in srgb, var(--ezui-destructive) 80%, #fff);
  --ezui-destructive-soft:       color-mix(in srgb, var(--ezui-destructive) 10%, #fff);
  --ezui-destructive-soft-hover: color-mix(in srgb, var(--ezui-destructive) 18%, #fff);
  --ezui-destructive-soft-line:  color-mix(in srgb, var(--ezui-destructive) 28%, #fff);

  /* Warning and success get no -hover: white text does not reach 4.5:1 on
     either, so neither is ever a filled button. They are only ever a
     banner: -soft, -soft-line, their text colour and a dot. */
  --ezui-warning: #fb8c00;
  --ezui-warning-soft:      color-mix(in srgb, var(--ezui-warning) 10%, #fff);
  --ezui-warning-soft-line: color-mix(in srgb, var(--ezui-warning) 28%, #fff);

  --ezui-success: #43a047;
  --ezui-success-soft:      color-mix(in srgb, var(--ezui-success) 10%, #fff);
  --ezui-success-soft-line: color-mix(in srgb, var(--ezui-success) 28%, #fff);

  /* -- One grey, at six strengths. Opacities and not fixed greys, so they
     darken correctly over a tinted surface instead of sitting on it as a
     grey patch. -- */
  --ezui-ink: 16, 30, 52;
  --ezui-fill-disabled: rgba(var(--ezui-ink), .02);
  --ezui-fill:          rgba(var(--ezui-ink), .04);
  --ezui-fill-hover:    rgba(var(--ezui-ink), .07);
  --ezui-fill-strong:   rgba(var(--ezui-ink), .11);
  --ezui-border:        rgba(var(--ezui-ink), .138);
  --ezui-border-hover:  rgba(var(--ezui-ink), .255);

  /* -- Text. The four greys in order of importance, then text in each
     colour, then text on a filled colour.

     Quaternary is the same strength as --ezui-border-hover on purpose, and
     a name of its own because it does a different job.

     The coloured text is worked out, not picked: each colour darkened
     towards black until its lightness is 0.50. Scaling l, a and b by the
     same amount is exactly mixing with black, so the hue holds and the
     result is always a colour every screen can show. At 0.50 every one of
     them reads at 4.5:1 or better on white, on its own -soft and, where it
     has one, on its own -soft-hover. -- */
  --ezui-text-primary:     #212327;
  --ezui-text-secondary:   #50565e;
  --ezui-text-tertiary:    #808893;
  --ezui-text-quaternary:  rgba(var(--ezui-ink), .255);
  --ezui-text-accent:      oklab(from var(--ezui-accent) 0.5 calc(a * 0.5 / l) calc(b * 0.5 / l));
  --ezui-text-destructive: oklab(from var(--ezui-destructive) 0.5 calc(a * 0.5 / l) calc(b * 0.5 / l));
  --ezui-text-warning:     oklab(from var(--ezui-warning) 0.5 calc(a * 0.5 / l) calc(b * 0.5 / l));
  --ezui-text-success:     oklab(from var(--ezui-success) 0.5 calc(a * 0.5 / l) calc(b * 0.5 / l));
  --ezui-text-inverse:     #ffffff;

  /* -- Surfaces. The panel sits on the page, not under it. -- */
  --ezui-page: #fdfeff;
  --ezui-panel: #ffffff;
  --ezui-panel-shadow: -1px 0 6px rgba(var(--ezui-ink), .06);
}