/**
 * A2A Design System - Design Tokens
 * Auto-generated from Figma: https://www.figma.com/design/J9zMWbR7avJy6S7Rn0FNJD/A2A-Design-System
 *
 * Usage:
 *   color: var(--color-blue-500);
 *   padding: var(--spacing-4);
 *   border-radius: var(--radius-md);
 */

:root {
  /* ========================================
     Colors
     ======================================== */

  /* Blue */
  --color-blue-950: rgb(10, 35, 123);
  --color-blue-900: rgb(13, 71, 161);
  --color-blue-800: rgb(21, 101, 192);
  --color-blue-700: rgb(25, 118, 210);
  --color-blue-600: rgb(30, 136, 229);
  --color-blue-500: rgb(33, 150, 243);
  --color-blue-400: rgb(66, 165, 245);
  --color-blue-300: rgb(100, 181, 246);
  --color-blue-200: rgb(144, 202, 249);
  --color-blue-100: rgb(187, 222, 251);
  --color-blue-50: rgb(227, 242, 253);

  /* Green */
  --color-green-950: rgb(13, 79, 21);
  --color-green-900: rgb(27, 94, 32);
  --color-green-800: rgb(46, 125, 50);
  --color-green-700: rgb(56, 142, 60);
  --color-green-600: rgb(67, 160, 71);
  --color-green-500: rgb(76, 175, 80);
  --color-green-400: rgb(102, 187, 106);
  --color-green-300: rgb(129, 199, 132);
  --color-green-200: rgb(165, 214, 167);
  --color-green-100: rgb(200, 230, 201);
  --color-green-50: rgb(232, 245, 233);

  /* Yellow */
  --color-yellow-950: rgb(230, 81, 0);
  --color-yellow-900: rgb(245, 127, 23);
  --color-yellow-800: rgb(249, 168, 37);
  --color-yellow-700: rgb(251, 192, 45);
  --color-yellow-600: rgb(253, 216, 53);
  --color-yellow-500: rgb(255, 235, 59);
  --color-yellow-400: rgb(255, 238, 88);
  --color-yellow-300: rgb(255, 241, 118);
  --color-yellow-200: rgb(255, 245, 157);
  --color-yellow-100: rgb(255, 249, 196);
  --color-yellow-50: rgb(255, 253, 231);

  /* Red */
  --color-red-950: rgb(142, 0, 0);
  --color-red-900: rgb(183, 28, 28);
  --color-red-800: rgb(198, 40, 40);
  --color-red-700: rgb(211, 47, 47);
  --color-red-600: rgb(229, 57, 53);
  --color-red-500: rgb(244, 67, 54);
  --color-red-400: rgb(239, 83, 80);
  --color-red-300: rgb(229, 115, 115);
  --color-red-200: rgb(239, 154, 154);
  --color-red-100: rgb(255, 205, 210);
  --color-red-50: rgb(255, 235, 238);

  /* Neutral */
  --color-neutral-950: rgb(15, 16, 18);
  --color-neutral-900: rgb(23, 24, 27);
  --color-neutral-800: rgb(32, 33, 36);
  --color-neutral-700: rgb(60, 64, 67);
  --color-neutral-600: rgb(95, 99, 104);
  --color-neutral-500: rgb(128, 134, 139);
  --color-neutral-400: rgb(154, 160, 166);
  --color-neutral-300: rgb(189, 193, 198);
  --color-neutral-200: rgb(218, 220, 224);
  --color-neutral-100: rgb(241, 243, 244);
  --color-neutral-50: rgb(248, 249, 250);

  /* Base colors */
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);

  /* ========================================
     Spacing
     ======================================== */

  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  /* ========================================
     Border Radius
     ======================================== */

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;

  /* ========================================
     Border Width
     ======================================== */

  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;
  --border-6: 6px;
  --border-8: 8px;

  /* ========================================
     Typography - Font Families
     ======================================== */

  --font-family-primary: 'Oswald', sans-serif;
  --font-family-secondary: 'Inter', sans-serif;

  /* ========================================
     Typography - Font Weights
     ======================================== */

  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;

  /* ========================================
     Typography - Font Sizes
     ======================================== */

  /* Display (H1) */
  --font-size-display-large: 56px;
  --font-size-display-medium: 44px;
  --font-size-display-small: 36px;

  /* Headline (H2) */
  --font-size-headline-large: 32px;
  --font-size-headline-medium: 28px;
  --font-size-headline-small: 24px;

  /* Title (H3) */
  --font-size-title-large: 22px;
  --font-size-title-medium: 16px;
  --font-size-title-small: 14px;

  /* Label */
  --font-size-label-large: 16px;
  --font-size-label-medium: 14px;
  --font-size-label-small: 11px;

  /* Body */
  --font-size-body-large: 16px;
  --font-size-body-medium: 14px;
  --font-size-body-small: 12px;

  /* Numerals */
  --font-size-numerals-large: 22px;
  --font-size-numerals-medium: 16px;
  --font-size-numerals-small: 12px;

  /* ========================================
     Typography - Line Heights
     ======================================== */

  /* Display */
  --line-height-display-large: 64px;
  --line-height-display-medium: 52px;
  --line-height-display-small: 44px;

  /* Headline */
  --line-height-headline-large: 40px;
  --line-height-headline-medium: 36px;
  --line-height-headline-small: 32px;

  /* Title */
  --line-height-title-large: 28px;
  --line-height-title-medium: 22px;
  --line-height-title-small: 18px;

  /* Label */
  --line-height-label-large: 22px;
  --line-height-label-medium: 19px;
  --line-height-label-small: 15px;

  /* Body */
  --line-height-body-large: 22px;
  --line-height-body-medium: 19px;
  --line-height-body-small: 17px;

  /* Numerals */
  --line-height-numerals-large: 28px;
  --line-height-numerals-medium: 22px;
  --line-height-numerals-small: 18px;

  /* ========================================
     Typography - Letter Spacing
     ======================================== */

  /* Display */
  --letter-spacing-display-large: 0px;
  --letter-spacing-display-medium: 0px;
  --letter-spacing-display-small: 0px;

  /* Headline */
  --letter-spacing-headline-large: -1px;
  --letter-spacing-headline-medium: -1px;
  --letter-spacing-headline-small: -1px;

  /* Title */
  --letter-spacing-title-large: 0.1px;
  --letter-spacing-title-medium: 0.1px;
  --letter-spacing-title-small: 0.1px;

  /* Label */
  --letter-spacing-label-large: -0.1px;
  --letter-spacing-label-medium: -0.05px;
  --letter-spacing-label-small: 0px;

  /* Body */
  --letter-spacing-body-large: -0.1px;
  --letter-spacing-body-medium: -0.08px;
  --letter-spacing-body-small: -0.06px;

  /* Numerals */
  --letter-spacing-numerals-large: -0.4px;
  --letter-spacing-numerals-medium: -0.3px;
  --letter-spacing-numerals-small: -0.2px;
}