/*
CSS DIRECTORY
  1. =GLOBAL
  2. =BOARD
  3. =RESTART BUTTON
*/

/* ===GLOBAL=== */

:root {
  color-scheme: light;

  --tint-h: 220;
  --tint-s: 45%;
  --color-bg: hsl(from var(--color-fg) h s calc(l - 5));
  --color-fg: hsl(var(--tint-h), var(--tint-s), 100%);
  --color-txt: hsl(var(--tint-h), var(--tint-s), 10%);
  --color-txt-muted: hsl(from var(--color-txt) h s calc(l + 30));
  --color-border: hsl(from var(--color-txt) h s calc(l + 25) / 25%);
  --color-border-btn: hsl(from var(--color-border) h s calc(l - 25));

  --ff: system-ui, sans-serif;
  --fw: 500;
  --font-header: var(--fw) 4.5rem var(--ff);
  --font-announcement: var(--fw) 1.5rem var(--ff);
  --font-body: var(--fw) 1.25rem var(--ff);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-txt-muted);
  font: var(--font-body);
}

/* --Typography-- */

h1 {
  color: var(--color-txt);
  font: var(--font-header);
}

.announcement {
  font: var(--font-announcement);
}

/* ===BOARD=== */

.board {
  display: grid;
  grid-template: repeat(3, 6.5rem) / repeat(3, 6.5rem);
  gap: 0.5rem;
  margin: 1.25rem;
}

/* --Cells-- */

.cell:hover,
button:hover {
  cursor: pointer;
  transition: all 200ms ease;
}

.cell {
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 3px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-fg);
  color: var(--color-txt);
  transition: all 200ms ease;

  &:hover {
    box-shadow: inset 0 0 999px 999px var(--color-border);
  }
}

.cell--marker {
  width: 100%;
  height: 100%;
  font-size: 4.5rem;
  text-align: center;
}

/* ===RESTART BUTTON=== */

button {
  border: 3px solid var(--color-border-btn);
  border-radius: 999em;
  padding: 0.25em 2em;
  background-color: var(--color-txt-muted);
  color: var(--color-fg);
  transition: all 200ms ease;

  &:hover {
    box-shadow: inset 0 0 999px 999px var(--color-border-btn);
  }
}