/* ===============================
   DESIGN TOKENS
================================ */

:root {
  --main-width: 96rem;

  /* fonts */
  --font-default: 'Poppins', sans-serif;
  --font-monospace:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* font sizes */
  --font-xxsm: 1.4rem;
  --font-xsm: 1.6rem;
  --font-sm: 1.8rem;
  --font-me: 2rem;
  --font-lg: 2.2rem;
  --font-xlg: 2.4rem;
  --font-xxlg: 2.8rem;

  /* headings */
  --font-heading-xxsm: 2.4rem;
  --font-heading-xsm: 2.8rem;
  --font-heading-sm: 3.2rem;
  --font-heading-me: 3.6rem;
  --font-heading-lg: 4rem;
  --font-heading-xlg: 4.4rem;
  --font-heading-xxlg: 4.8rem;
  --font-heading-xxxlg: 7.8rem;

  /* weights */
  --font-bold: 800;
  --font-regular: 400;

  /* line height */
  --line-height-me: 1.8;
  --line-height-heading: 1.15;

  /* spacing */
  --sm-spacing-xxsm: 1.6rem;
  --sm-spacing-xsm: 2rem;
  --sm-spacing-sm: 2.4rem;
  --sm-spacing-me: 2.8rem;
  --sm-spacing-lg: 3.2rem;
  --sm-spacing-xlg: 4rem;
  --sm-spacing-xxlg: 4.4rem;

  /* radius */
  --border-radius-me: 8px;

  /* colors (LIGHT) */
  --bg-default: #ffffff;
  --bg-surface-default: #f1f1f1;

  --fg-default: #101015;
  --fg-default-muted: #303045;

  --bg-brand-default: #0044dd;
  --bg-brand-hover: #1166ff;
  --bg-brand-disabled: #ccccdd;
  --bg-brand-secondary: #333344;
  --bg-brand-secondary-hover: #444455;

  --fg-brand-default: #eeeeff;
  --fg-brand-hover: #ffffff;
  --fg-brand-disabled: #777788;
  --fg-brand-secondary: #eeeeff;
  --fg-brand-secondary-hover: #ffffff;

  --fg-neutral-400: #80809980;
}

/* ===============================
   DARK MODE
================================ */

.dark-mode {
  --bg-default: #101015;
  --bg-surface-default: #151520;

  --fg-default: #eeeeff;
  --fg-default-muted: #ccccff;
}

/* ===============================
   RESET
================================ */

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

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
}

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

/* ===============================
   THEME TOGGLE
================================ */

#theme-mode {
  position: fixed;
  right: clamp(1rem, 2.5vw, 3rem);
  top: clamp(1rem, 2.5vw, 3rem);
  appearance: none;
  opacity: 0.3;
  transition: opacity 300ms ease-in-out;
}

#theme-mode:hover {
  opacity: 1;
}

#theme-mode::before {
  content: '🌑';
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
}

#theme-mode:checked::before {
  content: '☀️';
}

/* ===============================
   LAYOUT
================================ */

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: calc(var(--sm-spacing-me) * 2)
    clamp(var(--sm-spacing-sm), 5vw, var(--sm-spacing-xlg));
  font-family: var(--font-default);
  color: var(--fg-default);
  font-size: var(--font-me);
  line-height: var(--line-height-me);
  background: var(--bg-default);
  min-height: 100vh;
}

.article {
  width: 100%;
  max-width: var(--main-width);
  min-width: 0;
  font-size: clamp(var(--font-sm), 4vw, var(--font-xlg));
  display: flow-root;
  overflow-wrap: anywhere;
}

/* ===============================
   VERTICAL RHYTHM (MAGIA)
================================ */

.article > * + * {
  margin: var(--sm-spacing-xlg) 0;
}

/* ===============================
   HEADINGS
================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-heading);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.article h1 {
  font-size: clamp(var(--font-heading-me), 10vw, var(--font-heading-xxxlg));
  margin: clamp(var(--sm-spacing-xlg), 10vw, calc(var(--sm-spacing-xlg) * 3)) 0;
}

.article h2 {
  font-size: clamp(var(--font-heading-sm), 8vw, var(--font-heading-xxlg));
  margin: clamp(var(--sm-spacing-lg), 8vw, calc(var(--sm-spacing-xlg) * 2)) 0;
}

.article h3 {
  font-size: clamp(var(--font-heading-xsm), 7vw, var(--font-heading-xlg));
  margin: clamp(var(--sm-spacing-lg), 6vw, calc(var(--sm-spacing-xlg) * 1.8)) 0;
}

.article h4 {
  font-size: clamp(var(--font-heading-xxsm), 6vw, var(--font-heading-lg));
  margin: clamp(var(--sm-spacing-lg), 6vw, calc(var(--sm-spacing-xlg) * 1.6)) 0;
}

.article h5 {
  font-size: clamp(var(--font-heading-xxsm), 5vw, var(--font-heading-me));
  margin: clamp(var(--sm-spacing-lg), 5vw, calc(var(--sm-spacing-xlg) * 1.4)) 0;
}

.article h6 {
  font-size: clamp(var(--font-heading-xxsm), 5vw, var(--font-heading-xsm));
  margin: clamp(var(--sm-spacing-lg), 5vw, calc(var(--sm-spacing-xlg) * 1.2)) 0;
}

/* ===============================
   TEXT
================================ */

.article p {
  text-wrap: pretty;
}

a {
  color: var(--fg-default);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

/* ===============================
   CODE
================================ */

p code {
  padding: 0.4rem 1rem;
  background: var(--bg-surface-default);
  border-radius: var(--border-radius-me);
  font-family: var(--font-monospace);
  font-size: var(--font-sm);
}

.author {
  font-size: var(--font-xsm);
  color: var(--fg-default-muted);

  a {
    color: var(--fg-default-muted);
  }
}

pre {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--sm-spacing-me);
  background: var(--bg-surface-default);
  border-radius: var(--border-radius-me);
  overflow-x: auto;
  font-family: var(--font-monospace);
  font-size: var(--font-sm);
  line-height: var(--line-height-me);
  color: var(--fg-default);
}

pre code {
  display: block;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

hr {
  border: none;
  border-bottom: 1px solid var(--fg-neutral-400);
}

/* ===============================
   BLOCKQUOTE
================================ */

blockquote {
  margin-left: 0;
  margin-right: 0;
  background: var(--bg-surface-default);
  color: var(--fg-default-muted);
  padding: var(--sm-spacing-me);
  border-radius: var(--border-radius-me);
  font-size: var(--font-sm);
}

blockquote a {
  color: var(--fg-default-muted);
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ===============================
   LISTS / MEDIA
================================ */

ul,
ol {
  padding-left: 4rem;
}

@media (max-width: 767px) {
  ul,
  ol {
    padding-left: 2.6rem;
  }
}

img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.img-card {
  max-width: 100%;
  display: block;
}

.img-card a {
  display: block;
  transform-style: preserve-3d;
  perspective: 4000px;
}

.img-card img {
  display: block;
  transition: all 300ms ease-in-out;
  transform: scale(1) rotateY(0) rotateX(0);
  border-radius: var(--border-radius-me);
}

/* ===============================
   Footer
================================ */
.nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--sm-spacing-me);
  width: 100%;
  max-width: var(--main-width);
  margin-top: var(--sm-spacing-xlg);
  font-size: var(--font-xsm);
  color: var(--fg-default-muted);

  a {
    color: var(--fg-default-muted);
  }
}

/* ===============================
   Forms
================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sm-spacing-xlg);
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--sm-spacing-sm);
}

textarea,
button,
select {
  font-size: clamp(var(--font-xsm), 4vw, var(--font-sm));
  font-family: var(--font-monospace);
}

select {
  width: 100%;
  padding: var(--sm-spacing-xxsm) var(--sm-spacing-xxsm);
  border-radius: var(--border-radius-me);
}

textarea {
  width: 100%;
  max-width: var(--main-width);
  min-height: 25rem;
  font-family: var(--font-monospace);
  border-radius: var(--border-radius-me);
  padding: var(--sm-spacing-sm);
}

button {
  border: none;
  background: var(--bg-brand-default);
  color: var(--fg-brand-default);
  cursor: pointer;
  padding: var(--sm-spacing-xxsm) var(--sm-spacing-xlg);
  border-radius: 9999px;
  transition: all 300ms ease-in-out;
  flex-grow: 1;
}

button:hover {
  background: var(--bg-brand-hover);
  color: var(--fg-brand-hover);
}

button:disabled {
  background: var(--bg-brand-disabled);
  color: var(--fg-brand-disabled);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-brand-secondary);
  color: var(--fg-brand-secondary);
}

.btn-secondary:hover {
  background: var(--bg-brand-secondary-hover);
  color: var(--fg-brand-secondary-hover);
}