/* Cora's colours in one place (Chris, 07.10.2026): one neutral, slightly cool grey ramp for both themes, named by its
   luminance (--grey-008 darkest … --grey-249 lightest); every stylesheet uses these instead of grey values of its own.
   Veils are the same greys over what lies below: rgb(var(--veil-light) / .1) for a light film, --veil-dark for a dark
   one. Shadows stay black. Load before every other stylesheet. */
:root {
  --grey-008: #07080a;
  --grey-011: #0a0b0d;
  --grey-014: #0d0e10;
  --grey-017: #101113;
  --grey-020: #131416;
  --grey-026: #191a1c;
  --grey-030: #1d1e20;
  --grey-035: #222325;
  --grey-045: #2c2d2f;
  --grey-055: #363739;
  --grey-072: #47484a;
  --grey-095: #5e5f61;
  --grey-110: #6d6e70;
  --grey-130: #818284;
  --grey-150: #959698;
  --grey-172: #abacae;
  --grey-205: #cccdcf;
  --grey-222: #dddee0;
  --grey-233: #e8e9eb;
  --grey-242: #f1f2f4;
  --grey-249: #f8f9fb;
  --veil-light: 238 239 241;
  --veil-dark: 18 19 21;
}

/* Existing control metrics, shared by the UI components. */
:root {
  --ui-radius-control: 10px;
  --ui-radius-icon: 8px;
  --ui-radius-field: 9px;
  --ui-radius-panel: 14px;
  --ui-radius-dialog: 18px;
  --ui-radius-pill: 999px;
  --ui-text-small: 10px;
  --ui-text-base: 14px;
  --ui-text-title: 24px;
  --ui-control-weight: 720;
  --ui-control-padding: 12px 17px;
  --ui-small-control-padding: 8px 12px;
  --ui-field-padding: 10px 11px;
  --ui-dialog-padding: 24px;
  --ui-dialog-gap: 20px;
  --ui-icon-size: 32px;
  --ui-quiet-icon-size: 25px;
}