/**
 * Design Tokens - Colors
 * Generated from Figma InDoctors design system
 */

:root {
  /* Primitive Colors - Grey */
  --grey-10: #000000;
  --grey-20: #131313;
  --grey-30: #262626;
  --grey-40: #393939;
  --grey-50: #4d4d4d;
  --grey-60: #606060;
  --grey-70: #737373;
  --grey-80: #868686;
  --grey-90: #999999;
  --grey-100: #acacac;
  --grey-110: #bfbfbf;
  --grey-120: #d2d2d2;
  --grey-130: #e6e6e6;
  --white: #ffffff;

  /* Primitive Colors - Aqua */
  --aqua-10: #ecfcf1;
  --aqua-20: #daf9e3;
  --aqua-30: #c7f5d5;
  --aqua-40: #b5f2c7;
  --aqua-50: #a2efb9;
  --aqua-60: #82bf94;
  --aqua-70: #618f6f;
  --aqua-90: #41604a;
  --aqua-100: #203025;

  /* Gradients */
  --gradient-2: linear-gradient(90deg, #f8a573, #b5f2c7);

  /* Semantic Colors */
  --primary: var(--aqua-40);
  --on-primary: var(--aqua-90);
  --primary-100: var(--aqua-30);
  --on-primary-100: var(--aqua-60);

  /* Display Sizes */
  --display-size-display1: 180px;
  --display-size-display2: 124px;
  --display-size-display3: 102px;
  --display-size-display4: 82px;
  --display-size-display5: 72px;
  --display-size-display6: 64px;
  --display-size-display7: 46px;
  --display-size-display8: 34px;
  --display-size-display9: 22px;
}

/**
 * Color utility classes
 */

/* Background - Grey */
.bg-grey-10 { background-color: var(--grey-10); }
.bg-grey-20 { background-color: var(--grey-20); }
.bg-grey-30 { background-color: var(--grey-30); }
.bg-grey-40 { background-color: var(--grey-40); }
.bg-grey-50 { background-color: var(--grey-50); }
.bg-grey-60 { background-color: var(--grey-60); }
.bg-grey-70 { background-color: var(--grey-70); }
.bg-grey-80 { background-color: var(--grey-80); }
.bg-grey-90 { background-color: var(--grey-90); }
.bg-grey-100 { background-color: var(--grey-100); }
.bg-grey-110 { background-color: var(--grey-110); }
.bg-grey-120 { background-color: var(--grey-120); }
.bg-grey-130 { background-color: var(--grey-130); }
.bg-white { background-color: var(--white); }

/* Text - Grey */
.text-grey-10 { color: var(--grey-10); }
.text-grey-20 { color: var(--grey-20); }
.text-grey-30 { color: var(--grey-30); }
.text-grey-40 { color: var(--grey-40); }
.text-grey-50 { color: var(--grey-50); }
.text-grey-60 { color: var(--grey-60); }
.text-grey-70 { color: var(--grey-70); }
.text-grey-80 { color: var(--grey-80); }
.text-grey-90 { color: var(--grey-90); }
.text-grey-100 { color: var(--grey-100); }
.text-grey-110 { color: var(--grey-110); }
.text-grey-120 { color: var(--grey-120); }
.text-grey-130 { color: var(--grey-130); }
.text-white { color: var(--white); }

/* Background - Aqua */
.bg-aqua-10 { background-color: var(--aqua-10); }
.bg-aqua-20 { background-color: var(--aqua-20); }
.bg-aqua-30 { background-color: var(--aqua-30); }
.bg-aqua-40 { background-color: var(--aqua-40); }
.bg-aqua-50 { background-color: var(--aqua-50); }
.bg-aqua-60 { background-color: var(--aqua-60); }
.bg-aqua-70 { background-color: var(--aqua-70); }
.bg-aqua-90 { background-color: var(--aqua-90); }
.bg-aqua-100 { background-color: var(--aqua-100); }

/* Text - Aqua */
.text-aqua-10 { color: var(--aqua-10); }
.text-aqua-20 { color: var(--aqua-20); }
.text-aqua-30 { color: var(--aqua-30); }
.text-aqua-40 { color: var(--aqua-40); }
.text-aqua-50 { color: var(--aqua-50); }
.text-aqua-60 { color: var(--aqua-60); }
.text-aqua-70 { color: var(--aqua-70); }
.text-aqua-90 { color: var(--aqua-90); }
.text-aqua-100 { color: var(--aqua-100); }

/* Gradient utilities */
.text-gradient-2 {
  background: var(--gradient-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Semantic color utilities */
.bg-primary { background-color: var(--primary); }
.bg-on-primary { background-color: var(--on-primary); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-on-primary-100 { background-color: var(--on-primary-100); }

.text-primary { color: var(--primary); }
.text-on-primary { color: var(--on-primary); }
.text-primary-100 { color: var(--primary-100); }
.text-on-primary-100 { color: var(--on-primary-100); }