@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;
  --cryptle-icon: url('../assets/logo.svg');
  --color-background: #8ebdce;
  --game-color-background: #ffffff;
  --game-text-color: #111111;
  --settings-surface-color: #ffffff;
  --settings-border-color: #d0d7de;
  --settings-text-color: #111111;
  --settings-hover-color: #f5f6f8;
  --settings-cog-color: #222222;
  --empty-tile-color: #cbcdd1;

  /* 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;
  --codeboard-height: 200px;

  /* Colours for pegs indicating correctness of guess */
  --red-peg-color: #ed2d2d;
  --red-peg-border: #c52323;
  --white-peg-color: #ffffff;
  --white-peg-border: #757575;
  --grey-peg-color: #a2a2a2;
  --grey-peg-border: #757575;
  --empty-peg-color: #f4f4f4;

  /* Button styles */
  --bg-btn-primary: #000000;
  --text-btn-primary: #ffffff;
  --sm-btn-border-color: #828181;
  --sm-btn-text-color: #787878;
  --share-btn-color: rgb(87, 198, 67);
  --share-border-color: rgb(71, 167, 54);


  /* tile colours */
  --tile-pink-background: #fb65bf;
  --tile-pink-border: #c35c95;
  --tile-blue-background: #4bbcfd;
  --tile-blue-border: #3a92c6;
  --tile-green-background: #09d766;
  --tile-green-border: #0e944a;
  --tile-yellow-background: #ffd900;
  --tile-yellow-border: #d4ad00;
  --tile-orange-background: #ff8437;
  --tile-orange-border: #de5900;
  --tile-purple-background: #ba51ea;
  --tile-purple-border: #9f19b7;
  --tile-brown-background: #d36e33;
  --tile-brown-border: #82431e;
  --tile-red-background: #f75353;
  --tile-red-border: #9f0e0e;
}

: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;
  --settings-cog-color: #f0f3f8;
  --empty-tile-color: #4a5664;
  --empty-peg-color: #212932;
  --white-peg-border: #c9d5e1;
  --grey-peg-color: #455365;
  --grey-peg-border: #424e5d;
  --sm-btn-text-color: #939292;
  --sm-btn-border-color: #858585;
}

:root[data-contrast="high"] {
  --tile-pink-background: #cc79a7;
  --tile-blue-background: #56b4e9;
  --tile-green-background: #017d5c;
  --tile-green-border: #026b4f;
  --tile-yellow-background: #ffb300;
  --tile-yellow-border: #d89700;
  --tile-orange-background: #ff6800;
  --tile-purple-background: #803e75;
  --tile-purple-border: #602a57;
  --tile-brown-background: #c6bab3;
  --tile-brown-border: #b4a399;
  --tile-red-background: #c10020;
  --tile-red-border: #9f011b;
  --empty-tile-color: #797979;
  --sm-btn-border-color: #797979;
}