:root {
  --brand: hsl(var(--brand-color, 190 66% 22%));
  --brand-dark: hsl(var(--brand-dark-color, 190 74% 16%));
  --brand-pastel: hsl(var(--brand-pastel-color, 187 31% 89%));
  --accent-light: hsl(var(--accent-light-color, 103 57% 90%));
  --accent-dark: hsl(var(--accent-dark-color, 320 100% 92%));
  --light: hsl(var(--light-color, 0 0% 96%));
  --shade: hsl(var(--shade-color, 0 0% 18%));

  --ui-bg-page: var(--brand-pastel);
  --ui-bg-card: #ffffff;
  --ui-bg-input: #f1f3f6;
  --ui-bg-gray3: #dcdcdc;
  --ui-bg-brand: var(--brand);
  --ui-bg-white: #ffffff;

  --ui-text-black: #181818;
  --ui-text-gray: #8f99a3;
  --ui-text-gray2: #6b7280;
  --ui-text-brand: var(--brand);
  --ui-text-white: #ffffff;
  --ui-text-accent-dark: var(--accent-dark);

  --ui-line-accent: hsl(var(--brand-color, 190 66% 22%) / 0.4);
  --ui-card-shadow: 0 3px 9px hsl(var(--shade-color, 0 0% 18%) / 0.08);

  --radius: 12px;
  --radius-sm: 8px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}