/* kr3m color system — derived from the kr3m logo (charcoal mascot + red "3") */
/* Synced 1:1 from kr3m Design System — tokens/colors.css. Do not edit by hand. */
:root {
  /* ---- Brand ---- */
  --kr-charcoal: #333333;   /* primary brand dark — mascot + wordmark "kr…m" */
  --kr-red: #ea2e42;        /* brand accent — the "3" */
  --kr-red-600: #cf2038;    /* red, pressed/hover-dark */
  --kr-red-050: #fdeaed;    /* red tint surface */

  /* ---- Neutral ramp ---- */
  --gray-950: #1a1a1a;
  --gray-900: #262626;
  --gray-800: #333333;
  --gray-700: #4d4d4d;
  --gray-600: #6b6b6b;
  --gray-500: #8c8c8c;
  --gray-400: #b3b3b3;
  --gray-300: #d6d6d6;
  --gray-200: #e6e6e6;
  --gray-100: #f2f2f2;
  --gray-050: #f8f8f8;
  --white: #ffffff;
  --black: #000000;

  /* ---- Semantic status ---- */
  --success: #2fa84f;
  --success-050: #eaf7ee;
  --warning: #e9a132;
  --warning-050: #fdf4e6;
  --danger: #ea2e42;        /* == brand red */
  --danger-050: #fdeaed;
  --info: #2f7fd6;
  --info-050: #eaf2fc;

  /* ---- Semantic aliases ---- */
  --text-strong: var(--gray-950);
  --text-body: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-on-dark: var(--white);
  --text-inverse: var(--white);
  --text-accent: var(--kr-red);

  --surface-page: var(--white);
  --surface-subtle: var(--gray-050);
  --surface-muted: var(--gray-100);
  --surface-card: var(--white);
  --surface-dark: var(--kr-charcoal);
  --surface-inverse: var(--gray-950);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-focus: var(--kr-red);

  --accent: var(--kr-red);
  --accent-hover: var(--kr-red-600);
  --accent-contrast: var(--white);
}