/* Design Tokens as CSS Variables */
:root {
  /* Primitive Colors - Grays */
  --color-gray-0: #fefefe;
  --color-gray-100: #e9e9e9;
  --color-gray-200: #dddddd;
  --color-gray-300: #d1d1d1;
  --color-gray-700: #686868;
  --color-gray-800: #4f4f4f;
  --color-gray-900: #222222;
  --color-gray-1000: #131313;

  /* Primitive Colors - Warm Gray */
  --color-warm-gray-50: #faf9f8;

  /* Primitive Colors - Red */
  --color-red-500: #DE3341;
  --color-red-600: #C12A36;
  --color-red-700: #A3202B;

  /* Primitive Colors - Teal */
  --color-teal-700: #15727a;

  /* Primitive Colors - Blue */
  --color-blue-500: #3b98ed;

  /* Spacing Tokens */
  --spacing-200: 0.25rem;
  --spacing-300: 0.5rem;
  --spacing-400: 0.75rem;
  --spacing-500: 1rem;
  --spacing-600: 1.25rem;
  --spacing-700: 1.5rem;
  --spacing-900: 2rem;

  /* Semantic Spacing */
  --spacing-xxsmall: var(--spacing-200);
  --spacing-xsmall: var(--spacing-300);
  --spacing-small: var(--spacing-400);
  --spacing-medium: var(--spacing-500);
  --spacing-large: var(--spacing-700);
  --spacing-xlarge: var(--spacing-900);

  /* Semantic Text Colors */
  --color-text-primary: var(--color-gray-1000);
  --color-text-secondary: var(--color-gray-700);
  --color-text-inverse: var(--color-gray-0);
  --color-text-accent: var(--color-teal-700);
  --color-text-link: var(--color-teal-700);

  /* Semantic Background Colors */
  --color-background-primary: var(--color-gray-0);
  --color-background-subtle: var(--color-warm-gray-50);

  /* Semantic UI Colors */
  --color-ui-brand: var(--color-red-500);
  --color-ui-brand-hover: var(--color-red-600);
  --color-ui-brand-pressed: var(--color-red-700);
  --color-ui-primary: var(--color-gray-0);
  --color-ui-secondary: var(--color-gray-900);
  --color-ui-static-light: var(--color-gray-0);
  --color-border-divider: var(--color-gray-200);
  --color-border-secondary: var(--color-gray-300);
  --color-icon-accent: var(--color-teal-700);

  /* Typography - Primitive */
  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.125rem;
  --font-size-600: 1.4375rem;
  --font-size-700: 1.625rem;

  --font-weight-default: 400;
  --font-weight-bold: 700;

  --line-height-default: 1.6;
  --line-height-compact: 1.4;

  /* Typography - Semantic */
  --font-size-body-xsmall: var(--font-size-100);
  --font-size-body-small: var(--font-size-200);
  --font-size-body-base: var(--font-size-300);

  /* Border radius */
  --border-radius-6: 6px;
  --border-radius-12: 12px;
  --border-radius-100: 100px;
}


/* Fonts */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-bold.woff2') format('woff2');
  font-weight: 700;
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: var(--color-text-link);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

a:hover {
  color: var(--color-text-accent);
  text-decoration: underline;
}

a:active {
  color: var(--color-text-accent);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

.flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.font-size-small {
  font-size: var(--font-size-body-small);
}

.font-size-xsmall {
  font-size: var(--font-size-body-xsmall);
}

.font-headline-medium {
  font-size: var(--font-size-700);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
}

.font-headline-small {
  font-size: var(--font-size-600);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
}

.font-headline-xsmall {
  font-size: var(--font-size-400);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
}

.color-text-secondary {
  color: var(--color-text-secondary);
}

body {
    font-family: 'Inter', Arial, sans-serif;
    font-size: var(--font-size-body-base);
    font-weight: var(--font-weight-default);
    line-height: var(--line-height-default);
    color: var(--color-text-primary);
    background-color: var(--color-background-primary);
}

.bp-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--spacing-600);
  border-radius: var(--border-radius-100);
  border: 1px solid transparent;
  background-color: var(--color-ui-brand);
  color: var(--color-text-inverse);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.1px;
  user-select: none;

}

.bp-Button:hover {
  background-color: var(--color-ui-brand-hover);
  text-decoration: none;
}

.bp-Button:active {
  background-color: var(--color-ui-brand-pressed);
}

.bp-Button:focus-visible {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
}

.bp-Button:disabled,
.bp-Button[aria-disabled='true'] {
  background-color: var(--color-gray-300);
  color: var(--color-text-secondary);
  border-color: var(--color-gray-300);
  cursor: not-allowed;
  pointer-events: none;
}

.bp-Button.secondary {
  background-color: var(--color-ui-secondary);
  color: var(--color-text-inverse);
  border-color: var(--color-ui-secondary);
}

.bp-Button.secondary-outlined {
  background-color: var(--color-ui-primary);
  color: var(--color-ui-secondary);
  border-color: var(--color-ui-secondary);
}

.bp-Button.secondary:hover,
.bp-Button.secondary-outlined:hover {
  background-color: var(--color-ui-secondary);
  border-color: var(--color-ui-secondary);
  color: var(--color-text-inverse);
}

.bp-Button.secondary:active,
.bp-Button.secondary-outlined:active {
  background-color: var(--color-ui-secondary);
  border-color: var(--color-ui-secondary);
  color: var(--color-text-inverse);
}

.bp-Button.primary {
  background-color: var(--color-ui-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-ui-brand);
}

.bp-Button.primary:hover {
  background-color: var(--color-ui-brand-hover);
  border-color: var(--color-ui-brand-hover);
  color: var(--color-text-inverse);
}

.bp-Button.primary:active {
  background-color: var(--color-ui-brand-pressed);
  border-color: var(--color-ui-brand-pressed);
  color: var(--color-text-inverse);
}