/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');

:root {
  /* Default colours from "Deadlock" theme */
  --color-bg-primary: hsl(220 60% 10%);
  --color-bg-secondary: hsl(220 40% 25%);

  --color-text-primary: hsl(180 100% 100%);
  --color-text-secondary: hsl(55 20% 75%);
  --color-text-subtle: var(--color-text-secondary);

  --color-border: hsl(220 15% 40%);
  --color-border-subtle: hsl(220 25% 25%);

  --color-accent: hsl(45 75% 65%);
  --color-accent-hover: hsl(from var(--color-accent) h s calc(l + 30));
  --color-accent-text: var(--color-bg-primary);

  --color-surface: hsl(from var(--color-bg-primary) h s l / 75%);

  --color-success: hsl(140, 50%, 55%);
  --color-warning: hsl(35, 70%, 50%);
  --color-error: hsl(360, 65%, 50%);
  --color-info: hsl(200, 70%, 45%);
}

html {
  font-family: Inter, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 100dvh;
  background: var(--color-bg-primary);
  background: linear-gradient(to bottom, var(--color-bg-secondary) 0px, var(--color-bg-primary) 1600px);
  color: var(--color-text-primary);
}

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

body {
  margin: 0 auto;
  padding: 0;
  font-size: 1rem;
}

main {
  width: 72rem;
  margin-block-start: 4em;
  place-self: center;
}

h1, h2, h3, h4 {
  font-family: Manrope, sans-serif;
  font-weight: 400;
}

a {
  text-decoration: none;
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}