/* Design tokens extracted from Figma variables (file: LonGo, lbuRth9RzYbfWSiNDmnrFu) */
:root {
  /* Color: neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f5f5f5;
  --color-neutral-850: #161718;

  /* Color: primary (brand olive/cream) */
  --color-primary-50: #f8f8ee;
  --color-primary-100: #efefd3;
  --color-primary-200: #dedfa8;
  --color-primary-300: #cacb87;
  --color-primary-400: #b7b76c;

  /* Color: surface */
  --color-surface-bg-surface: #0f1010;
  --color-surface-bg-surface-raised: #1d1e1e;
  --color-surface-bg-surface-subtle: #161718;
  --color-surface-bg-surface-inverse: #f5f5f5;

  /* Color: text */
  --color-text-strong: #ffffff;
  --color-text-default: #cdcdcd;
  --color-text-subtle: #cacaca;
  --color-text-muted: #6e6e6e;
  --color-text-inverse-strong: #1d1e1e;
  --color-text-inverse-default: #070707;
  --color-text-brand: #b7b76c;
  --color-text-brand-strong: #cacb87;
  --color-text-link-visited: #7a7b40;

  /* Color: border */
  --color-border-default: #2c2c2d;
  --color-border-active: #b7b76c;

  /* Color: button */
  --color-button-primary-bg: #ffffff;
  --color-button-primary-text: #070707;
  --color-button-accent-bg: #cacb87;
  --color-button-accent-text: #070707;

  /* Color: status */
  --color-status-success-text: #4cc38a;
  --color-status-success-bg: #133929;
  --color-status-success-border: #1b543a;
  --color-status-success-icon: #4cc38a;
  --color-status-neutral-text: #cdcdcd;
  --color-status-neutral-bg: #1d1e1e;
  --color-status-neutral-border: #2c2c2d;
  --color-status-danger-text: #ffb224;
  --color-status-danger-bg: #3f2700;
  --color-status-danger-border: #5d3a00;
  --color-status-danger-icon: #ffb224;
  --color-status-warning-icon: #ff6369;

  /* Font families */
  --font-family-primary: 'Bricolage Grotesque', sans-serif;
  --font-family-secondary: 'Geist', sans-serif;

  /* Font sizes */
  --font-size-200: 13px;
  --font-size-300: 14px;
  --font-size-400: 16px;
  --font-size-500: 20px;
  --font-size-600: 24px;
  --font-size-700: 32px;
  --font-size-800: 40px;
  --font-size-900: 48px;
  --font-size-950: 80px;

  /* Font weights */
  --font-weight-300: 300;
  --font-weight-500: 500;
  --font-weight-600: 600;

  /* Type styles (family / size / weight / line-height) */
  --display-md-size: var(--font-size-950);
  --display-md-line-height: 1.1;
  --display-sm-size: var(--font-size-900);
  --display-sm-line-height: 1.1;
  --heading-h1-size: var(--font-size-800);
  --heading-h1-line-height: 1.2;
  --heading-h2-size: var(--font-size-700);
  --heading-h2-line-height: 1.2;
  --heading-h3-size: var(--font-size-600);
  --heading-h3-line-height: 1.2;
  --heading-h4-size: var(--font-size-500);
  --heading-h4-line-height: 1.2;
  --heading-h6-size: var(--font-size-300);
  --heading-h6-line-height: 1.2;
  --label-lg-size: var(--font-size-400);
  --label-lg-line-height: 1;
  --label-sm-size: var(--font-size-200);
  --label-sm-line-height: 1;
  --body-xl-size: 18px;
  --body-xl-line-height: 1.4;
  --body-lg-size: var(--font-size-400);
  --body-lg-line-height: 1.5;
  --body-md-size: var(--font-size-300);
  --body-md-line-height: 1.5;
  --body-sm-size: var(--font-size-200);
  --body-sm-line-height: 1.5;
  --caption-lg-size: var(--font-size-300);
  --caption-lg-line-height: 1.3;
  --caption-md-size: var(--font-size-200);
  --caption-md-line-height: 1.3;

  /* Spacing: padding */
  --spacing-padding-0: 0px;
  --spacing-padding-xs: 4px;
  --spacing-padding-sm: 8px;
  --spacing-padding-md: 12px;
  --spacing-padding-lg: 16px;
  --spacing-padding-xl: 20px;
  --spacing-padding-2xl: 24px;
  --spacing-padding-3xl: 32px;
  --spacing-padding-4xl: 40px;
  --spacing-padding-8xl: 100px;
  --spacing-padding-9xl: 120px;
  --spacing-800: 40px;

  /* Spacing: gap */
  --spacing-gap-xs: 4px;
  --spacing-gap-sm: 8px;
  --spacing-gap-md: 12px;
  --spacing-gap-lg: 16px;
  --spacing-gap-xl: 20px;
  --spacing-gap-2xl: 24px;
  --spacing-gap-3xl: 32px;
  --spacing-gap-6xl: 64px;
  --spacing-gap-7xl: 80px;

  /* Radius */
  --radius-md: 12px;
  --radius-400: 24px;
  --radius-3xl: 40px;
  --radius-pill: 1000px;

  /* Border width */
  --border-width-sm: 1px;
}