/* Cascade layers, lowest first. Every stylesheet wraps its rules in one of
   them; third-party CSS is imported into the vendor layer by the stylesheet
   that uses it. Bare element rules (text.css) are base, beneath vendor: a
   library keeps styling the markup it renders, and components override it by
   class. The tokens here and in colors.css stay unlayered. */
@layer reset, base, vendor, components, utilities;

:root {
  /* Spacing: one scale, stepped from --inline-space and --block-space */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);

  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-third: calc(var(--block-space) / 3);
  --block-space-quarter: calc(var(--block-space) / 4);
  --block-space-three-eighths: calc(var(--block-space) * 0.375);
  --block-space-three-quarters: calc(var(--block-space) * 0.75);
  --block-space-one-and-half: calc(var(--block-space) * 1.5);
  --block-space-double: calc(var(--block-space) * 2);

  /* Type: a fixed scale, then the container-relative scale (cqi resolves where a token is used) */
  --font-size-xs: 0.8rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.4rem;

  --font-x-small-responsive: clamp(0.65rem, 1.5cqi, 0.75rem);
  --font-small-responsive: clamp(0.75rem, 1.8cqi, 0.875rem);
  --font-small-medium-responsive: clamp(0.8rem, 2cqi, 1.05rem);
  --font-medium-responsive: clamp(0.9rem, 2.25cqi, 1.25rem);
  --font-large-responsive: clamp(1.15rem, 3.5cqi, 1.6rem);
  --font-x-large-responsive: clamp(1.6rem, 4.5cqi, 2.8rem);

  /* Header keycaps: --font-medium-responsive, but viewport-relative, so the
     keycaps inside #dock (a size container) match the header ones */
  --keycap-font-size: clamp(1rem, 2.5vi, 1.4rem);

  /* Border radius */
  --border-radius: 0.375rem;
  --panel-border-radius: 1em;

  /* Border - customizable via --border-size and --border-color */
  --border-size: 1.5px;
  --border: var(--border-size, 2px) solid
    var(--border-color, var(--color-gray-light));

  /* Focus rings: the keyboard outline, and the box-shadow ring of inputs, editors, pickers and the drop zone */
  --focus-ring-size: 2px;
  --focus-ring-offset: 2px;
  --input-focus-ring: 0 0 0 var(--focus-ring-size) var(--color-blue-bright);
  --input-focus-border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);

  /* Shadows (colors.css swaps --shadow for the dark theme) */
  --shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.02),
    0 0.2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
    0 0.4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
    0 0.4em 0.8em -1.2em oklch(var(--lch-always-black) / 0.4),
    0 0.8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
  --shadow-large: 2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small: 1px 3px 6px hsl(0 0% 0% / 0.1);

  /* Backdrop grey behind slide-overs and modal dialogs */
  --backdrop-color: rgb(107 114 128);

  /* Z-index: page-level layers that stack across files, lowest first */
  --z-popup: 101;
  --z-slide-over: 198;
  --z-flash: 1001;
}