/* -------------------------------------------------- */
/* Theme Tokens                                       */
/* -------------------------------------------------- */
:root {
  /* App color tokens from Style/AppStyle.swift */
  --black: #000000;
  --grey-00: #1d1c1b;
  --grey-10: #2e2d2c;
  --grey-20: #3e3d3c;
  --grey-30: #5b5b5a;
  --grey-40: #81807e;
  --grey-50: #a5a4a2;
  --grey-80: #c6c6c4;
  --danger: #ae0a0a;
  --danger-bg: #4f1617;
  --danger-bg-dark: #260202;
  --primary: #b5c8a6;
  --primary-bg: #363935;
  --secondary: #7f8cff;
  --secondary-bg: #2c3159;
  --white: #ffffff;
  --grid-line: rgba(255, 255, 255, 0.15);

  --app-bg: var(--black);
  --app-text: var(--primary);
  --app-muted: var(--grey-40);
  --app-border: var(--grey-30);
}

/* -------------------------------------------------- */
/* Base / Reset                                       */
/* -------------------------------------------------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* -------------------------------------------------- */
/* App Shell                                          */
/* -------------------------------------------------- */
body {
  font-family: "Barlow", sans-serif;
  background-color: var(--app-bg);
  color: var(--app-text);
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0 39px,
      var(--grid-line) 39px 40px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 39px,
      var(--grid-line) 39px 40px
    );
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* -------------------------------------------------- */
/* Media                                              */
/* -------------------------------------------------- */
.logo {
  width: 100%;
  height: auto;
}

.logo-sm {
  width: 60px;
  height: auto;
}

/* -------------------------------------------------- */
/* Typography                                         */
/* -------------------------------------------------- */
h1 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
}

h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--app-text);
  text-transform: uppercase;
}

p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 200;
  color: var(--white);
}

a {
  color: var(--secondary);
}

.accent {
  color: var(--primary) !important;
  font-weight: bold;
}

/* -------------------------------------------------- */
/* Utilities                                          */
/* -------------------------------------------------- */
.uppercase {
  text-transform: uppercase;
}

.text-sm {
  font-size: 0.75rem;
}

.text-400 {
  font-weight: 400;
}

.text-primary {
  color: var(--primary);
}

.m-b-md {
  margin-bottom: 1rem;
}