/* 
LAST UPDATED 9/20/2025 BY MARTIN BERNARD PER THE FOLLOWING LINK:
https://www.figma.com/design/JSu5tzHepPupXI4NPPHI1G/Calcite-Brand-UI-Kit?m=auto&node-id=2569-276708&vars=1&var-set-id=15694-16157
*/

/* ------------------------------------------ */
/* COLOR */
/* We define light and dark mode variables within the scope of calcite core color mode classes in order to unify color mode functionality across custom elements, calcite core elements, and Maps SDK for JS elemenets */
/* ------------------------------------------ */

#app .calcite-mode-dark {
  color-scheme: dark;

  --background-default: oklch(0.18 0 0);
  --background-1: oklch(0.22 0 0);
  --background-2: oklch(0.26 0 0);
  --background-3: oklch(0.30 0 0);

  --brand-default: oklch(0.66 0.17 239);
  --brand-hover: oklch(0.72 0.17 239);
  --brand-press: oklch(0.75 0.15 239);

  --status-danger-default: oklch(0.65 0.24 30);
  --status-danger-hover: oklch(0.71 0.24 30);
  --status-danger-press: oklch(0.74 0.20 30);

  --status-success-default: oklch(0.66 0.26 147);
  --status-success-hover: oklch(0.72 0.26 147);
  --status-success-press: oklch(0.75 0.22 147);

  --status-warning-default: oklch(0.79 0.18 88);
  --status-warning-hover: oklch(0.85 0.18 88);
  --status-warning-press: oklch(0.88 0.14 88);

  --status-info-default: oklch(0.66 0.19 239);
  --status-info-hover: oklch(0.72 0.17 239);
  --status-info-press: oklch(0.75 0.15 239);

  --inverse-default: oklch(1 0 0);
  --inverse-hover: oklch(0.96 0 0);
  --inverse-press: oklch(0.92 0 0);

  --text-1: oklch(1 0 0 / 0.96);
  --text-2: oklch(1 0 0 / 0.67);
  --text-3: oklch(1 0 0 / 0.58);
  --text-inverse: oklch(0 0 0 / 0.96);

  --text-link-default: oklch(0.66 0.17 239);
  --text-link-hover: oklch(0.72 0.17 239);
  --text-link-press: oklch(0.75 0.15 239);

  --transparent-hover: oklch(1 0 0 / 0.12);
  --transparent-press: oklch(1 0 0 / 0.14);
  --transparent-scrim: oklch(0 0 0 / 0.67);
  
  --border-1: oklch(1 0 0 / 0.25);
  --border-2: oklch(1 0 0 / 0.21);
  --border-3: oklch(1 0 0 / 0.14);
  --border-input: oklch(1 0 0 / 0.41);
}

#app .calcite-mode-light {
  color-scheme: light;

  --background-default: oklch(1 0 0);
  --background-1: oklch(0.98 0 0);
  --background-2: oklch(0.94 0 0);
  --background-3: oklch(0.90 0 0);

  --brand-default: oklch(0.53 0.15 239);
  --brand-hover: oklch(0.47 0.13 239);
  --brand-press: oklch(0.36 0.10 239);

  --status-danger-default: oklch(0.55 0.22 30);
  --status-danger-hover: oklch(0.49 0.19 30);
  --status-danger-press: oklch(0.38 0.17 30);

  --status-success-default: oklch(0.65 0.22 149);
  --status-success-hover: oklch(0.61 0.20 149);
  --status-success-press: oklch(0.38 0.15 149);

  --status-warning-default: oklch(0.86 0.20 100);
  --status-warning-hover: oklch(0.80 0.20 100);
  --status-warning-press: oklch(0.69 0.15 100);

  --status-info-default: oklch(0.47 0.13 239);
  --status-info-hover: oklch(0.36 0.10 239);
  --status-info-press: oklch(0.30 0.08 239);

  --inverse-default: oklch(0.20 0 0);
  --inverse-hover: oklch(0.28 0 0);
  --inverse-press: oklch(0.40 0 0);

  --text-1: oklch(0 0 0 / 0.96);
  --text-2: oklch(0 0 0 / 0.67);
  --text-3: oklch(0 0 0 / 0.58);
  --text-inverse: oklch(1 0 0 / 0.96);

  --text-link-default: oklch(0.47 0.13 239);
  --text-link-hover: oklch(0.36 0.10 239);
  --text-link-press: oklch(0.30 0.08 239);

  --transparent-hover: oklch(0 0 0 / 0.04);
  --transparent-press: oklch(0 0 0 / 0.08);
  --transparent-scrim: oklch(1 0 0 / 0.67);
  
  --border-1: oklch(0 0 0 / 0.25);
  --border-2: oklch(0 0 0 / 0.21);
  --border-3: oklch(0 0 0 / 0.14);
  --border-input: oklch(0 0 0 / 0.33);
}

/* ------------------------------------------ */
/* SPACING */
/* TBD whether this is useful for us */
/* ------------------------------------------ */

#app {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;
  --space-56: 224px;
  --space-64: 256px;
}

/* ------------------------------------------ */
/* TYPE */
/* We separate out type classes between weights and sizing/spacing so they can be used */
/* ------------------------------------------ */

.weight-light {
  font-weight: 300;
}

.weight-regular {
  font-weight: 400;
}

.weight-medium {
  font-weight: 500;
}

.weight-bold {
  font-weight: 600;
}

/* WRAPPING CLASSES */

.text--3-wrap {
  font-size: 10px;
  line-height: 13.75px;
}

.text--2-wrap {
  font-size: 12px;
  line-height: 16.5px;
}

.text--1-wrap {
  font-size: 14px;
  line-height: 19.25px;
}

.text-0-wrap {
  font-size: 16px;
  line-height: 22px;
}

.text-2-wrap {
  font-size: 20px;
  line-height: 27.5px;
}

.text-3-wrap {
  font-size: 26px;
  line-height: 32.5px;
}

.text-4-wrap {
  font-size: 32px;
  line-height: 40px;
}

.text-5-wrap {
  font-size: 40px;
  line-height: 50px;
}

.text-6-wrap {
  font-size: 48px;
  line-height: 60px;
}

.text-7-wrap {
  font-size: 56px;
  line-height: 70px;
}

.text-8-wrap {
  font-size: 64px;
  line-height: 80px;
}

/* HEADING CLASSES */

.text--3h {
  font-size: 10px;
  line-height: 12px;
}

.text--2h {
  font-size: 12px;
  line-height: 16px;
}

.text--1h {
  font-size: 14px;
  line-height: 16px;
}

.text-0h {
  font-size: 16px;
  line-height: 20px;
}

.text-1h {
  font-size: 18px;
  line-height: 24px;
}

.text-2h {
  font-size: 20px;
  line-height: 24px;
}

.text-3h {
  font-size: 26px;
  line-height: 32px;
}

.text-4h {
  font-size: 32px;
  line-height: 40px;
}

.text-5h {
  font-size: 40px;
  line-height: 48px;
}

.text-6h {
  font-size: 48px;
  line-height: 64px;
}

.text-7h {
  font-size: 56px;
  line-height: 64px;
}

.text-8h {
  font-size: 64px;
  line-height: 80px;
}