:root {
  /* =============================
     1. Primitive Tokens — Color
     ============================= */

  /* Red */
  --color-red-100: #fdecec;
  --color-red-200: #f9c4c4;
  --color-red-300: #f28a8a;
  --color-red-400: #e95454;
  --color-red-500: #e02828;
  --color-red-600: #b82020;
  --color-red-700: #8f1919;
  --color-red-800: #661212;
  --color-red-900: #3d0b0b;

  /* Gray */
  --color-gray-0: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e8e8e8;
  --color-gray-300: #d1d1d1;
  --color-gray-400: #949494;
  --color-gray-500: #767676;
  --color-gray-600: #5c5c5c;
  --color-gray-700: #414141;
  --color-gray-800: #2b2b2b;
  --color-gray-900: #1a1a1a;
  --color-gray-1000: #000000;

  /* =============================
     2. Primitive Tokens — Typography
     ============================= */

  /* Font Family */
  --font-family: "aktiv-grotesk", sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;

  /* Font Sizes */
  --text-xl: 36px;
  --text-lg: 22px;
  --text-md: 18px;
  --text-sm: 16px;
  --text-xs: 14px;
  --text-tiny: 12px;

  /* Line Heights */
  --leading-xl: 48px;
  --leading-lg: 36px;
  --leading-md: 24px;
  --leading-sm: 22px;
  --leading-xs: 18px;
  --leading-tiny: 16px;

  /* =============================
     Primitive Tokens — Spacing
     ============================= */

  --space-half: 2px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 64px;
  --space-8: 96px;
  --space-72: 72px;
  --space-88: 88px;

  /* =============================
     3. Semantic Tokens — Color
     ============================= */

  /* Brand */
  --color-brand-primary: var(--color-red-500);
  --color-brand-primary-light: var(--color-red-300);
  --color-brand-primary-dark: var(--color-red-700);

  /* Surface & Background */
  --color-bg: var(--color-gray-0);
  --color-bg-subtle: var(--color-gray-200);
  --color-surface: var(--color-gray-0);
  --color-bg-inverse: var(--color-gray-1000);

  /* Text */
  --color-text: var(--color-gray-1000);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse: var(--color-gray-0);
  --color-text-inverse-secondary: var(--color-gray-400);

  /* Interactive */
  --color-accent: var(--color-brand-primary);
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-primary-dark);

  /* Border */
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-400);

  /* =============================
     4. Semantic Tokens — Typography
     ============================= */

  /* Heading XL */
  --type-heading-xl-size: var(--text-xl);
  --type-heading-xl-leading: var(--leading-xl);
  --type-heading-xl-weight: var(--font-weight-regular);

  /* Heading LG */
  --type-heading-lg-size: var(--text-lg);
  --type-heading-lg-leading: var(--leading-lg);
  --type-heading-lg-weight: var(--font-weight-regular);

  /* Heading MD */
  --type-heading-md-size: var(--text-md);
  --type-heading-md-leading: var(--leading-md);
  --type-heading-md-weight: var(--font-weight-regular);

  /* Body SM */
  --type-body-sm-size: var(--text-sm);
  --type-body-sm-leading: var(--leading-sm);
  --type-body-sm-weight: var(--font-weight-regular);

  /* Body XS */
  --type-body-xs-size: var(--text-xs);
  --type-body-xs-leading: var(--leading-xs);
  --type-body-xs-weight: var(--font-weight-regular);

  /* Body Tiny */
  --type-body-tiny-size: var(--text-tiny);
  --type-body-tiny-leading: var(--leading-tiny);
  --type-body-tiny-weight: var(--font-weight-regular);

  /* Composite type styles (font shorthand): weight size / leading family */
  --type-heading-xl: var(--type-heading-xl-weight) var(--type-heading-xl-size) / var(--type-heading-xl-leading) var(--font-family);
  --type-heading-lg: var(--type-heading-lg-weight) var(--type-heading-lg-size) / var(--type-heading-lg-leading) var(--font-family);
  --type-heading-md: var(--type-heading-md-weight) var(--type-heading-md-size) / var(--type-heading-md-leading) var(--font-family);
  --type-body-sm: var(--type-body-sm-weight) var(--type-body-sm-size) / var(--type-body-sm-leading) var(--font-family);
  --type-body-xs: var(--type-body-xs-weight) var(--type-body-xs-size) / var(--type-body-xs-leading) var(--font-family);
  --type-body-tiny: var(--type-body-tiny-weight) var(--type-body-tiny-size) / var(--type-body-tiny-leading) var(--font-family);
}