/* vedakonduru.net — shared editorial styles */
:root {
  --ink:        oklch(0.20 0.012 60);
  --ink-2:      oklch(0.36 0.010 60);
  --ink-3:      oklch(0.55 0.008 60);
  --rule:       oklch(0.86 0.008 60);
  --rule-2:     oklch(0.92 0.006 60);
  --paper:      oklch(0.985 0.006 85);
  --paper-2:    oklch(0.965 0.008 85);
  --accent:     oklch(0.52 0.13 30);    /* terra */
  --accent-soft:oklch(0.94 0.04 30);
  --linkedin:   oklch(0.48 0.10 245);
  --linkedin-soft: oklch(0.96 0.025 245);
  --x-ink:      oklch(0.18 0.01 60);
  --x-soft:     oklch(0.97 0.004 60);

  --serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans:  "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* ──────────── shared editorial bits ──────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-thick { border: 0; border-top: 2px solid var(--ink); margin: 0; }
.rule-dotted { border: 0; border-top: 1px dashed var(--rule); margin: 0; }

.tag-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.tag-pill:hover { border-color: var(--ink); color: var(--ink); }
.tag-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.source-chip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.source-chip.linkedin { background: var(--linkedin-soft); color: var(--linkedin); }
.source-chip.x        { background: var(--x-soft); color: var(--x-ink); border: 1px solid oklch(0.88 0 0); }

/* ──────────── reusable post-card variants ──────────── */
.post-card { background: transparent; }
.post-card.linkedin { background: var(--linkedin-soft); border: 1px solid oklch(0.90 0.03 245); border-radius: 4px; padding: 18px 20px; }
.post-card.x { background: var(--x-soft); border: 1px solid oklch(0.90 0 0); padding: 18px 20px; font-family: var(--mono); }

/* ──────────── focus / interaction ──────────── */
button { font-family: inherit; cursor: pointer; }
input, textarea {
  font-family: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  border-radius: 3px;
  color: var(--ink);
  outline: none;
  width: 100%;
}
input:focus, textarea:focus { border-color: var(--ink); }

/* ──────────── selection ──────────── */
::selection { background: var(--accent-soft); color: var(--ink); }