/* Theme tokens. The OS preference picks a side; every rule below reads them. */
:root {
  color-scheme: light dark;

  /* Palette */
  --ink: #293c4b;
  --paper: #ffffff;
  --ash: #cfcfcf;
  --charcoal: rgb(29, 29, 29);

  /* Roles. Light value first, dark second. */
  --fg: light-dark(var(--ink), var(--ash));
  --bg: light-dark(var(--paper), var(--charcoal));
  --btn-bg: light-dark(var(--ink), var(--charcoal));
  --btn-border: light-dark(transparent, var(--ash));
  --icon-notion: light-dark(#000000, #ffffff);
  --accent-hover: #576ce0;
  --accent-active: #0076d1;
  --emphasis-hover: #ff7518;
}

/* The button's override, in both directions. Cleared on reload. */
:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

body {
  font-family: 'Montserrat Alternates', sans-serif;
  margin: 0;
  text-align: center;
  color: var(--fg);
  background-color: var(--bg);
  transition: background-color 0.25s, color 0.25s;
}

/* General text */
p {
  font-size: 1.2rem;
  font-family: 'Cairo', sans-serif;
  max-width: 43.75rem;
  margin: 0.625rem auto;
}

/* Links and social icons share color and the fade-on-hover */
a,
i {
  color: var(--fg);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.5s;
}

a {
  font-size: 1.2rem;
}

/* Faster in than out */
a:hover {
  color: var(--accent-hover);
  transition: color 0.15s;
}

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

/* Keyboard focus. Same ring as the toggle button so both read as one system. */
a:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  border-radius: 2px;
  color: var(--accent-hover);
}

/* Spacing around social icons; em so it tracks the icon's own size */
i {
  padding: 0.25em;
}

#page {
  margin-top: 3.125rem;
  display: grid;
}

/* Headshot image */
#headshot {
  height: 12.5rem;
  vertical-align: middle;
}

/* Signature */
#sig {
  width: 25rem;
  max-width: 70%;
}

.emphasis {
  transition: color 0.5s;
}

.emphasis:hover {
  color: var(--emphasis-hover);
  transition: color 0.15s;
}

/* Social link icon wrapper */
#socialLink {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 17.5rem; /* adjust to fit 5 items per row */
  margin: 0.5em auto;
}

/* All child social links */
#socialLink > * {
  margin: 0.5rem;
}

/* Specify social icon hover color, in link order */
.fa-paper-plane:hover {
  color: #d44638;
}
.fa-book-bookmark:hover {
  color: #6466e9;
}
.fa-linktree:hover {
  color: #78e371;
}
.fa-notion:hover {
  color: var(--icon-notion);
}
.fa-book:hover {
  color: #ffb559;
}

#lightOrDarkButton {
  place-self: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--btn-border);
  background-color: var(--btn-bg);
  cursor: pointer;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
}

/* Keyboard focus only. A real outline survives forced-colors mode; the glow doesn't. */
#lightOrDarkButton:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  box-shadow: 0 0 10px var(--accent-hover);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cairo/v28/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hL4-a1biLC2CikE0n8H9.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cairo/v28/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hL4-a13iLC2CikE0n8H9.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cairo/v28/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hL4-a1PiLC2CikE0nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFCrxG-GNxklNd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFA7xG-GNxklNd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFCLxG-GNxklNd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFCbxG-GNxklNd.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserratalternates/v17/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xQIXFB7xG-GNxkg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}