/**
 * Constants
 */
:root {
  /* Colors */
  --red: #f13737;
  --green: #1adb91;
  --orange: #ff7f00;
  --yellow: #ffc933;
  --blue: hsl(212, 72%, 59%);

  --primary-color-lighter: hsl(212, 89%, 82%);
  --primary-color-light: hsl(212, 72%, 69%);
  --primary-color: hsl(212, 72%, 59%);
  --primary-color-dark: hsl(212, 78%, 50%);
  --primary-color-darker: hsl(212, 88%, 35%);

  /* Forms */
  --form-border-radius: 4px;

  /*  Easings */
  --pop-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-easing: linear(
    0,
    0.0022,
    0.0087 1.01%,
    0.0346 2.07%,
    0.0782 3.2%,
    0.1407 4.43%,
    0.2809 6.65%,
    0.7229 12.91%,
    0.9383 16.72%,
    1.0168,
    1.0774 20.43%,
    1.1213 22.33%,
    1.1493 24.31%,
    1.159 25.6%,
    1.1629 26.95%,
    1.1611 28.38%,
    1.1536 29.93%,
    1.1289 32.78%,
    1.0506 39.61%,
    1.0168 43.09%,
    0.9906 46.97%,
    0.9766 51%,
    0.9735 53.84%,
    0.9749 57.06%,
    0.9966 69.83%,
    1.0033 76.88%,
    1.0042 83.81%,
    1
  );
  --emphasis-easing: linear(
    0,
    0.0025 1.75%,
    0.0099 3.55%,
    0.0341 6.4%,
    0.0738 9.06%,
    0.1281 11.41%,
    0.194 13.37%,
    0.2714 14.97%,
    0.344 16.05%,
    0.5443 18.34%,
    0.6069 19.39%,
    0.6604 20.61%,
    0.7167 22.4%,
    0.7653 24.59%,
    0.8083 27.28%,
    0.8448 30.42%,
    0.8833 35.06%,
    0.9155 40.62%,
    0.9421 47.24%,
    0.9633 54.99%,
    0.9795 64.01%,
    0.9909 74.43%,
    0.9977 86.37%,
    1
  );
  --dur-s: 150ms;
  --dur-m: 300ms;
  --dur-l: 500ms;

  --quick: 150ms;
  --medium: 300ms;
  --slow: 450ms;
  --measure: 45ch;

  --gutter: var(--space-s);
}

/**
 * Foregrounds & Backgrounds
 */
:root {
  --fg-color: #0f1e2e;
  --fg-color-less: hsl(210, 4%, 40%);
  --bg-color: white;
  --window-color: #f3f3f3;

  @media (prefers-color-scheme: dark) {
    --fg-color: white;
    --fg-color-less: rgba(255, 255, 255, 0.7);
    --bg-color: hsl(44deg 8% 10%);
    --backdrop-color: rgba(0, 0, 0, 0.5);
    --window-color: #303231;
    --button-bg: linear-gradient(to bottom, hsl(0 0% 20%), hsl(0 0% 10%));
    --button-shine: tranparent;
  }
}

/** 
 * Text Colors
 */
:root {
  --text-active: var(--primary-color-darker);

  @media (prefers-color-scheme: dark) {
    --text-active: var(--primary-color-lighter);
  }
}

/**
 * Chrome / Grays
 */
:root {
  --chrome-color: hsl(212, 10%, 97%);
  --chrome-color-more: #e9eaeb;

  @media (prefers-color-scheme: dark) {
    --chrome-color: hsl(0deg 0% 16.02%);
    --chrome-color-more: hsl(0deg 0% 46.02%);
  }
}

/**
 * Emphasis
 */
:root {
  --emphasis-bg-less: rgba(0, 0, 0, 0.03);
  --emphasis-bg: rgba(0, 0, 0, 0.06);
  --emphasis-bg-more: rgba(0, 0, 0, 0.09);
  --emphasis-bg-most: rgba(0, 0, 0, 0.11);

  @media (prefers-color-scheme: dark) {
    --emphasis-bg-less: rgba(255, 255, 255, 0.05);
    --emphasis-bg: rgba(255, 255, 255, 0.15);
    --emphasis-bg-more: rgba(255, 255, 255, 0.2);
    --emphasis-bg-most: rgba(255, 255, 255, 0.3);
  }
}

/**
 * Borders
 */
:root {
  --border-color: hsl(216, 10%, 87%);
  --border-color-more: hsl(216, 10%, 70%);

  @media (prefers-color-scheme: dark) {
    --border-color: #393939;
    --border-color-more: rgba(255, 255, 255, 0.25);
  }
}

/**
 * Statuses
 */
:root {
  --success-color: var(--green);
  --error-color: var(--red);
  --info-color: var(--blue);
}

/**
 * Buttons
 */
:root {
  --button-background: hsl(212, 5%, 92%);
  --button-background-hover: hsl(212, 5%, 90%);
  --button-background-active: hsl(212, 5%, 87%);
}

/**
 * Form Inputs
 */
:root {
  --editor-background: white;
  --input-background: hsl(240, 15%, 92%);
  --form-bg-color: hsl(0 0% 93%);
  --form-bg-color-dark: #f8f8f8;
  --form-bg-color-darker: #e6e6e6;

  @media (prefers-color-scheme: dark) {
    --form-bg-color: var(--emphasis-bg);
    --form-bg-color-dark: var(--emphasis-bg-more);
    --form-bg-color-darker: var(--emphasis-bg-more);
  }
}

/**
 * Shadows
 */
:root {
  --shadow-s: 0px 0px 1px 0px rgb(0 0 0 / 30%);
  --shadow-m: 0px 0px 3px 0px rgb(0 0 0 / 30%);
  --shadow-l: 12px 12px 48px rgba(0, 0, 0, 0.45);
}

/**
 * Radius
 */
:root {
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 12px;
}

/**
 * Selection
 */
:root {
  --selected-bg: white;
  --selected-bg-active: hsl(0deg, 0%, 95%);

  @media (prefers-color-scheme: dark) {
    --selected-bg: rgba(255, 255, 255, 0.2);
    --selected-bg-active: rgba(255, 255, 255, 0.25);
  }
}

/**
 * Tables
 */
:root {
  --table-stripe-bg: rgba(0, 0, 0, 0.02);

  @media (prefers-color-scheme: dark) {
    --table-stripe-bg: rgba(255, 255, 255, 0.01);
  }
}

/** 
 * Backdrops
 */
*::backdrop {
  --backdrop-color: rgba(0, 0, 0, 0.6);

  @media (prefers-color-scheme: dark) {
    --backdrop-color: rgba(0, 0, 0, 0.7);
  }
}
