/*
 * Every colour the theme uses, and only here: the site's colours change in this file.
 * The role tokens in css/base.css (--ck-btn, --ck-field-border, …) and every stylesheet refer to these;
 * pnpm lint:colors rejects a colour literal anywhere else. See docs/design-system.md (Palette).
 */

:root {
  /* Ink and grounds. */
  --ck-ink: #111;
  --ck-white: #fff;
  --ck-surface: #fafafa;
  --ck-black: #000; /* only behind photographs and films, and in masks */

  /* Text. */
  --ck-muted: rgba(0, 0, 0, 0.55);
  --ck-placeholder: rgba(0, 0, 0, 0.45);
  --ck-faint: #bebcb4;

  /* Lines: one separates blocks, one encloses a control (docs/editorial.md, two hairlines). */
  --ck-line: rgba(0, 0, 0, 0.1);
  --ck-line-strong: rgba(0, 0, 0, 0.18);
  --ck-line-on-dark: rgba(255, 255, 255, 0.35);

  /* Depth and veils. */
  --ck-shadow: rgba(0, 0, 0, 0.12);
  --ck-shadow-on-media: rgba(0, 0, 0, 0.45);
  --ck-glass: rgba(0, 0, 0, 0.35);
  --ck-glass-light: rgba(250, 250, 250, 0.5);
  --ck-hint-ground: rgba(250, 250, 250, 0.85);
  --ck-scrim: rgba(0, 0, 0, 0.6);

  /* The button hover: the arithmetic middle between the two button families (docs/design-system.md). */
  --ck-btn-mid: rgba(0, 0, 0, 0.766);

  /* Signals. */
  --ck-err: #b00020;

  /* The film player's controls. */
  --ck-white-30: rgba(255, 255, 255, 0.3);
  --ck-white-45: rgba(255, 255, 255, 0.45);
  --ck-white-50: rgba(255, 255, 255, 0.5);
}