/*Shared look for every page of the TweakTags site: the color tokens, base type,
  the top bar and footer, and the small content components (pills, buttons, code
  blocks, tables, callouts). Page specific layout lives in docs.css and demo.css.
  See README.md in this folder for the markup each piece expects.*/

:root {
  --bg: #0e0f13;
  --surface: #14151a;
  --raised: #1e2028;
  --border: #2b2d38;
  --text: #f3f4f6;
  --muted: #9aa0ac;
  --primary: #0a84ff;
  --primary-hover: #3d9bff;
  --danger: #e5484d;
  --code-bg: #0b0c10;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--raised);
  border: 1px solid var(--border);
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}

/* Top bar */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: rgba(14, 15, 19, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
}

/*The wordmark png is 3x its display size, so it stays sharp on retina screens.*/
.brand img {
  display: block;
  height: 2.25rem;
  width: auto;
}

header.site .links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.95rem;
}

/* Pills and buttons */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.pill {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

.cta:hover {
  background: var(--primary-hover);
  color: #fff;
}

/* Code blocks */
.code {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  margin: 1rem 0;
  max-width: 46rem;
}

.code .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--mono);
}

.code pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: #d7dbe6;
}

.code .copy {
  cursor: pointer;
  background: var(--raised);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-family: var(--font);
}

.code .copy:hover {
  color: var(--text);
}

.tok-c {
  color: #6b7280;
} /* comment */
.tok-k {
  color: #38bdf8;
} /* keyword */
.tok-s {
  color: #98c379;
} /* string */
.tok-f {
  color: #82aaff;
} /* function or type */

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 46rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}

th,
td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
}

/* Callouts */
.callout {
  max-width: 46rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  background: var(--surface);
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  color: var(--muted);
}

.callout strong {
  color: var(--text);
}

/* Footer */
footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 820px) {
  header.site .links a.hide-sm {
    display: none;
  }
}