/* Betterloop design tokens, structure adapted from an external design system.
   Red signal and grey neutrals only. */
:root {
  /* Primitives */
  --betterloop-bg-light: #fafafa;
  --betterloop-bg-dark: #181818;

  --betterloop-grey-100: #181818;
  --betterloop-grey-80: #464646;
  --betterloop-grey-50: #8c8c8c;
  --betterloop-grey-30: #bababa;
  --betterloop-grey-10: #e8e8e8;
  --betterloop-grey-0: #ffffff;

  --betterloop-red-100: oklch(0.514 0.222 16.935);
  --betterloop-red-80: oklch(0.63 0.2 16.9);
  --betterloop-red-50: oklch(0.81 0.117 11.638);
  --betterloop-red-30: oklch(0.92 0.05 12);
  --betterloop-red-10: oklch(0.97 0.015 12.422);

  --betterloop-danger: oklch(0.577 0.245 27.325);

  /* Semantic */
  --betterloop-bg-canvas: var(--betterloop-bg-light);
  --betterloop-bg-surface: var(--betterloop-grey-0);
  --betterloop-bg-subtle: var(--betterloop-red-30);
  --betterloop-bg-inverse: var(--betterloop-bg-dark);

  --betterloop-text-default: var(--betterloop-grey-100);
  --betterloop-text-secondary: var(--betterloop-grey-80);
  --betterloop-text-muted: var(--betterloop-grey-50);
  --betterloop-text-inverse: var(--betterloop-grey-0);
  --betterloop-text-accent: var(--betterloop-red-100);

  --betterloop-border-subtle: var(--betterloop-grey-10);
  --betterloop-border-default: var(--betterloop-grey-30);
  --betterloop-border-strong: var(--betterloop-grey-50);

  --betterloop-brand-primary: var(--betterloop-grey-100);
  --betterloop-brand-primary-hover: #000000;
  --betterloop-brand-signal: var(--betterloop-red-100);
  --betterloop-brand-signal-hover: var(--betterloop-red-80);
  --betterloop-brand-signal-soft: var(--betterloop-red-50);
  --betterloop-brand-signal-subtle: var(--betterloop-red-30);

  --betterloop-hover-surface: var(--betterloop-red-10);
  --betterloop-active-surface: var(--betterloop-red-30);

  /* Typography */
  --betterloop-font-primary: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --betterloop-font-secondary: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Shape */
  --betterloop-radius-xs: 2px;
  --betterloop-radius-sm: 4px;
  --betterloop-radius-md: 5px;
  --betterloop-radius-lg: 8px;
  --betterloop-radius-xl: 10px;
  --betterloop-radius-round: 9999px;

  --betterloop-border-hairline: 0.5px;
  --betterloop-border-thin: 1px;
  --betterloop-border-strong-width: 1.5px;
}