/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
  --canvas-fill-color: #010101;

  /* primary-colors */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-primary: #0381fe;
  --color-primary-light: #3e91ff;
  --color-primary-dark: #0072de;

  --color-common-white: #fafafa;
  --color-functional-red: #db332a;
  --color-functional-red-light: #f76f68;
  --color-functional-green: #14a866;
  --color-functional-green-light: #5ad69e;
  --color-functional-orange: #ef5e16;
  --color-functional-orange-light: #f6874f;
  --color-common-black: #252525;

  --color-l1: #fcfcfc;
  --color-l2: #f6f6f6;
  --color-l3: #eeeeee;
  --color-l4: #e9e9e9;
  --color-l5: #e4e4e4;

  --color-d1: #010101;
  --color-d2: #101010;
  --color-d3: #171717;
  --color-d4: #2d2d2d;
  --color-d5: #3a3a3a;

  --color-l1-text: #fafafa;
  --color-l2-text: #e5e5e5;
  --color-l3-text: #cccccc;
  --color-l4-text: #a9a9a9;
  --color-l5-text: #999999;

  --color-d1-text: #010101;
  --color-d2-text: #252525;
  --color-d3-text: #4d4d4d;
  --color-d4-text: #636363;
  --color-d5-text: #8c8c8c;
  --color-d6-text: #2b2b2b;

  /* weather-icon-colors */
  --color-sun: #ffbc09;
  --color-moon: #ffc72a;
  --color-clouds-primary: #cce4ff;
  --color-clouds-secondary: #c2ddf9;

  --color-dark-clouds-primary: #ffffff;
  --color-dark-clouds-secondary: #f1f1f1;

  --color-wind: #c1c1c1;
  --color-storm-clouds: #e0e0e0;

  --color-dark-wind: #f1f1f1;
  --color-dark-storm-clouds: #ffffff;

  --color-snow: #70c8f9;
  --color-ice: #99e0ff;

  --color-dark-snow: #beebff;
  --color-dark-ice: #beebff;

  --color-hot: #e15d5d;
  --color-cold: #6fb7f1;

  /* extended-colors */
  --color-rain: #1eabc3;
  --color-wintry-mix: #e57beb;
  --color-ice-radar: #8d8eff;

  --color-dark-rain: #88dbe9;
  --color-dark-wintry-mix: #f1b5f4;
  --color-dark-ice-radar: #c3c4ff;

  --color-good: #89d538;
  --color-moderate: #efc03e;
  --color-caution: #fc9831;
  --color-unhealthy: #ea3c5c;
  --color-very-unhealthy: #cc53ca;
  --color-hazardous: #98276b;

  --color-very-high: #655aa5;
  --color-high: #8d91f9;
  --color-medium: #afb6fb;
  --color-low: #cacbfb;
  --color-very-low: #e6e7fb;

  /* font-family */
  --font-family: 'Noto Sans KR', 'Roboto', sans-serif;

  /* font-weight */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* border-radius */
  --border-radius-small: 12px;
  --border-radius-medium: 22px;
  --border-radius-large: 26px;

  /* layout */
  --background-color: var(--color-l2);
  --card-color: var(--color-l1);
  --button-color: var(--color-black);
  --select-color: var(--color-l4);
  --border-color: #e2e2e2;

  --main-color-d1: var(--color-black);
  --main-color-d2: var(--color-black);
  --main-color-d3: var(--color-d1);
  --main-color-d4: var(--color-common-black);
  --main-color-d5: var(--color-d5-text);

  --main-color-l1: var(--color-white);
  --main-color-l2: var(--color-l1);
  --main-color-l3: var(--color-d6-text);
  --main-color-l4: var(--color-d4-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas-fill-color: #ffffff;

    --background-color: var(--color-d1);
    --card-color: var(--color-d3);
    --button-color: #2c2c2c;
    --select-color: #2c2c2c;
    --border-color: #333333;

    --main-color-d1: var(--color-white);
    --main-color-d2: #898989;
    --main-color-d3: var(--color-white);
    --main-color-d4: var(--color-white);
    --main-color-d5: var(--color-l5-text);

    --main-color-l1: var(--color-black);
    --main-color-l2: var(--color-black);
    --main-color-l3: var(--color-white);
    --main-color-l4: var(--color-white);
  }
}