:root {
  /* =========================================
     PRIMITIVES - COLOR
     ========================================= */
  --primitives-color-black: #121212;
  --primitives-color-white: #FFFFFF;
  
  --primitives-color-yellow-500: #FFE200;
  
  --primitives-color-green-300: #56DA00;
  --primitives-color-green-500: #43AA00;
  
  --primitives-color-grey-100: #F2F2F2;
  --primitives-color-grey-600: #E0E0E0;
  --primitives-color-grey-800: #A5A5A5;
  --primitives-color-grey-900: #5F5F5F;

  /* =========================================
     PRIMITIVES - TYPOGRAPHY
     ========================================= */
  --primitives-font-families-mulish: "Mulish";
  --primitives-font-families-poppins: "Poppins";
  --primitives-font-families-arial: "Arial";
  
  --primitives-font-weight-regular: "Regular";
  --primitives-font-weight-bold: "Bold";
  --primitives-font-weight-extrabold: "Extra Bold";
  
  --primitives-font-size-xs: 10px;
  --primitives-font-size-sm: 14px;
  --primitives-font-size-md: 16px;
  --primitives-font-size-base-h4: 16px;
  --primitives-font-size-lg-body: 18px;
  --primitives-font-size-base-h3: 24px;
  --primitives-font-size-lg: 32px;
  --primitives-font-size-xl: 40px;
  --primitives-font-size-xxl: 48px;
  
  --primitives-line-height-xs: 16px;
  --primitives-line-height-sm: 20px;
  --primitives-line-height-md: 24px;
  --primitives-line-height-lg-body: 28px;
  --primitives-line-height-base-h3: 32px;
  --primitives-line-height-lg: 40px;
  --primitives-line-height-xl: 48px;
  --primitives-line-height-xxl: 58px;

  /* =========================================
     PRIMITIVES - MEASUREMENTS
     ========================================= */
  --primitives-radius-none: 0;
  --primitives-radius-xs: 2px;
  --primitives-radius-sm: 4px;
  --primitives-radius-full: 999px;
  
  --primitives-spacing-xxs: 2px;
  --primitives-spacing-xs: 4px;
  --primitives-spacing-sm: 8px;
  --primitives-spacing-md: 16px;
  --primitives-spacing-lg: 24px;
  --primitives-spacing-xl: 32px;
  
  --primitives-border-width-none: 0;
  --primitives-border-width-thin: 1px;
  --primitives-border-width-thick: 2px;

  /* =========================================
     SEMANTIC - LAYOUT
     ========================================= */
  --semantic-layout-margin-mobile: 20px;
  --semantic-layout-margin-desktop: 80px;
  
  --semantic-layout-gutter-mobile: 24px;
  --semantic-layout-gutter-desktop: 64px;

  /* =========================================
     SEMANTIC - SURFACE (ALIAS)
     ========================================= */
  --semantic-surface-brand: var(--primitives-color-yellow-500);
  --semantic-surface-action: var(--primitives-color-green-500);
  --semantic-surface-action-hover: var(--primitives-color-green-300);
  --semantic-surface-neutral: var(--primitives-color-white);
  --semantic-surface-muted: var(--primitives-color-grey-100);
  --semantic-surface-disabled: var(--primitives-color-grey-600);
  --semantic-surface-navigation: var(--primitives-color-black);

  /* =========================================
     SEMANTIC - TEXT (ALIAS)
     ========================================= */
  --semantic-text-on-action: var(--primitives-color-white);
  --semantic-text-on-brand: var(--primitives-color-black);
  --semantic-text-body: var(--primitives-color-grey-900);
  --semantic-text-disabled: var(--primitives-color-grey-800);

  /* =========================================
     SEMANTIC - BORDER (ALIAS)
     ========================================= */
  --semantic-border-low-contrast: var(--primitives-color-grey-100);
  --semantic-border-med-contrast: var(--primitives-color-grey-600);
  --semantic-border-high-contrast: var(--primitives-color-black);
  --semantic-border-action: var(--primitives-color-green-500);
  --semantic-border-section: var(--primitives-color-yellow-500);

  /* =========================================
     COMPONENTS - BUTTON
     ========================================= */
  --components-button-primary-default-background: var(--semantic-surface-action);
  --components-button-primary-default-text: var(--semantic-text-on-action);
  
  --components-button-primary-hover-background: var(--semantic-surface-action-hover);
  --components-button-primary-hover-text: var(--components-button-primary-default-text);
  
  --components-button-primary-disabled-background: var(--semantic-surface-disabled);
  --components-button-primary-disabled-text: var(--semantic-text-disabled);

  /* =========================================
     COMPONENTS - CHIP
     ========================================= */
  --components-chip-default-background: var(--semantic-surface-neutral);
  --components-chip-default-border: var(--primitives-color-grey-100);
  --components-chip-default-text: var(--primitives-color-black);
  
  --components-chip-hover-background: var(--semantic-surface-muted);
  --components-chip-hover-border: var(--primitives-color-black);
  
  --components-chip-selected-background: var(--semantic-surface-brand);
  --components-chip-selected-border: var(--primitives-color-black);

  --font-primary: 'Mulish', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
}