/*
  Shared design tokens used across the app: the admin dashboard (see
  manage-redesign-mockup.html), the authentication popup, and the customer-facing
  error card (ResponseHandler). Defined at :root so any component can consume them.
*/
:root {
    --surface: #ffffff;
    --surface-2: #faf8f9;
    --window: #f6f4f5;
    --ink: #241f21;
    --ink-2: rgba(76, 69, 72, .5);
    --muted: #797074;
    --hairline: #ece7e9;
    --hairline-2: #f2eef0;

    --brand: #8c2332;
    --brand-strong: #6f1b28;
    --brand-tint: #f7eaec;
    --brand-soft: #c9a2a8;

    --ok: #2e7d5b;
    --ok-tint: #e6f2ec;
    --warn: #a9781a;
    --warn-tint: #f6eeda;
    --info: #33698f;
    --info-tint: #e6eef4;
    --slate: #6b7280;
    --slate-tint: #eef0f2;
    --danger: #b23842;
    --danger-tint: #f7e7e9;

    --radius: 14px;
    --radius-sm: 9px;
    --radius-xs: 6px;

    --shadow-sm: 0 1px 2px rgba(36, 31, 33, .05);
    --shadow: 0 1px 2px rgba(36, 31, 33, .04), 0 8px 24px rgba(36, 31, 33, .07);
}