/* shahrouz.net — shared chrome: fonts, tokens, header, footer, console.
   Loaded by every page (landing, resume AND the PaperMod blog), so keep it free of
   element-level resets (body/a/h1/p/ul...) — those live in site.css, which the blog does not load. */

@font-face { font-family: "Plex Sans"; src: url("/fonts/site/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/site/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/site/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/site/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/site/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/site/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f5f1;
  --bg-2: #eeece6;
  --ink: #16181b;
  --ink-2: #4a4f57;
  --ink-3: #7a7f87;
  --rule: #d9d6cd;
  --accent: #0b7a52;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 122, 82, .10);
  --term-bg: #0f1214;
  --term-ink: #cfd6d2;
  --sans: "Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1080px;
  --wrap-pad: clamp(20px, 4vw, 40px);
  color-scheme: light;
}
:root:not([data-theme="light"]) { /* dark is the default, also without JS */
  --bg: #0d1012;
  --bg-2: #14181b;
  --ink: #e7ebe8;
  --ink-2: #a9b1ad;
  --ink-3: #6f7874;
  --rule: #242a2d;
  --accent: #3ddc97;
  --accent-ink: #06130d;
  --accent-soft: rgba(61, 220, 151, .10);
  color-scheme: dark;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 50; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { font: 500 14px/1 var(--mono); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.brand b { color: var(--accent); font-weight: 500; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { font: 400 14px/1 var(--mono); text-decoration: none; padding: 10px 10px; border-radius: 6px; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--bg-2); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.term-btn { font: 500 13px/1 var(--mono); }
.no-js .term-btn { display: none; }

/* footer */
.site-foot { padding: 40px 0 56px; font: 400 13px/1.7 var(--mono); color: var(--ink-3); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.site-foot .hint { margin-left: auto; }
.site-foot kbd { font: inherit; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--ink-2); }
.no-js .site-foot .hint { display: none; }

/* ---------- easter-egg terminal ---------- */
.term { position: fixed; inset: auto 16px 16px auto; width: min(680px, calc(100vw - 32px)); height: min(440px, calc(100vh - 32px)); z-index: 60; display: flex; flex-direction: column; background: var(--term-bg); color: var(--term-ink); border: 1px solid #2a3135; border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.45); font: 400 14px/1.6 var(--mono); }
.term[hidden] { display: none; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #22292c; color: #7d8a85; font-size: 12px; }
.term-bar button { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 4px 6px; }
.term-bar button:hover { color: #fff; }
.term-out { flex: 1; overflow-y: auto; padding: 14px 16px 4px; white-space: pre-wrap; word-break: break-word; }
.term-out .g { color: #3ddc97; }
.term-out .d { color: #7d8a85; }
.term-out a { color: #3ddc97; }
.term-in { display: flex; gap: 8px; padding: 6px 16px 14px; }
.term-in label { color: #3ddc97; white-space: nowrap; }
.term-in input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; caret-color: #3ddc97; padding: 0; }

.term-out a:hover { color: #3ddc97; }

/* ---------- responsive (chrome) ---------- */
@media (max-width: 420px) {
  .site-head .wrap { gap: 12px; padding: 0 16px; }
  .brand { font-size: 13px; }
  .brand .path { display: none; }
  .nav a { padding: 10px 7px; }
  .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 340px) {
  .site-head .wrap { gap: 8px; padding: 0 12px; }
  .brand { font-size: 12px; letter-spacing: 0; }
  .nav a { padding: 10px 5px; }
}
@media (max-width: 760px) {
  .nav a.hide-sm { display: none; }
  .site-foot .hint { margin-left: 0; }
}