@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  font-family: 'Montserrat', serif;
  font-size: 16px;
  --armadle-icon: url('../assets/armadle.svg');
  --color-background: #496a92;
  --icon-color: #222222;
  --settings-surface-color: #ffffff;
  --settings-border-color: #d0d7de;
  --settings-text-color: #111111;
  --settings-hover-color: #f5f6f8;

  /* Spacing variables */
  --vertical-spacing-0-5: 4px;
  --horizontal-spacing-0-5: 4px;
  --vertical-spacing-2: 16px;
  --horizontal-spacing-2: 16px;
  --vertical-spacing-1-5: 12px;
  --header-height: 40px;
  --header-toolbar-height: 50px;
  --header-padding-x: var(--horizontal-spacing-2);
  --game-max-width: 500px;
  --board-width: min(320px, 100vw);

  /* Button styles */
  --bg-btn-primary: #000000;
  --text-btn-primary: #ffffff;
  --sm-btn-bg-color: #e45c5c;
  --sm-btn-border-color: #aa3636;
  --sm-btn-text-color: #f8f7f7;
  --share-btn-color: #57C643;
  --share-border-color: #47A740;

  /* Game tile styles */
  --empty-tile-color: #6790c5;
  --empty-tile-bg-color: #b9d3f2;
  --selected-tile-bg-color: #d7e5f6;
  --miss-tile-color: #c8d7ea;
  --miss-tile-bg-color: #f7fafe;
  --hit-tile-color: #9f2232;
  --hit-tile-bg-color: #ee6b78;

  /* Ship styles */
  --ship-nf-color: #7a828d;
  --ship-nf-bg-color: #bbc0c5;
  --ship-f-color: #9f2232;
  --ship-f-bg-color: #ee6b78;;
  --ship-container-border: #8b939e;

  /* Life styles */
  --alive-color:#6ba987;
  --alive-bg-color:#86c69c;
  --life-lost-color: #bcc3cb;
  --life-lost-bg-color: #e6e9ec;
}

@media (min-width: 768px) {
  :root {
    --board-width: 360px;
  }
}

:root[data-theme="dark"] {
  --game-color-background: #12161c;
  --game-text-color: #f0f3f8;
  --settings-surface-color: #1d2630;
  --settings-border-color: #34475a;
  --settings-text-color: #f0f3f8;
  --settings-hover-color: #253242;
  --icon-color: #f0f3f8;
  --sm-btn-bg-color: #c65d6a;
  --sm-btn-border-color: #8e3f4b;
  --sm-btn-text-color: #f7f3f4;

  /* Game tile styles */
  --empty-tile-color: #35567e;
  --empty-tile-bg-color: #253d5d;
  --selected-tile-bg-color: #314862;
  --miss-tile-color: #273e5c;
  --miss-tile-bg-color: #142338;
  --hit-tile-color: #cc6873;
  --hit-tile-bg-color: #9e3945;

  /* Ship styles */
  --ship-nf-color: #bbc2ca;
  --ship-nf-bg-color: #77879c;
  --ship-f-color: #cc6873;
  --ship-f-bg-color: #9e3945;
  --ship-container-border: #5c6d83;

  /* Life styles */
  --alive-color: #63a88b;
  --alive-bg-color: #067b56;
  --life-lost-color: #505d6f;
  --life-lost-bg-color: #252c36;
}