/* Fonts - Geist Mono throughout (headings + labels/tags/prices/code). */
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap");

/* ============================================================
   Jaković Design System - editorial-warm + terminal-mono.
   Source of truth: .claude/skills/jakovic-design/
   ============================================================ */
:root {
  /* Warm neutral ramp (paper → ink) */
  --paper: #faf7f0;
  --paper-sunken: #f2ede2;
  --surface: #fffefb;
  --surface-2: #f7f2e8;
  --ink: #1b1a17;
  --ink-2: #46433b;
  --ink-3: #6f6a5e;
  --ink-4: #9a9384;
  --line: #e6dfd0;
  --line-2: #d6cdba;
  --line-strong: #1b1a17;

  /* Accent: terminal amber / ember */
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-bright: #d97917;
  --accent-soft: #fae9d0;
  --accent-line: #ecc9a0;

  /* Phosphor / terminal (dark surfaces & code blocks) */
  --term-bg: #15140f;
  --term-bg-2: #201e18;
  --term-fg: #e7e1d2;
  --term-dim: #8a8473;
  --term-green: #8fcb9b;
  --term-amber: #e8b257;
  --term-cyan: #8fb8c9;

  /* Semantic */
  --success: #2f7d45;
  --success-soft: #e2f0e4;
  --warning: #b45309;
  --warning-soft: #fae9d0;
  --danger: #b23a2e;
  --danger-soft: #f6e1dd;
  --info: #36607e;
  --info-soft: #e3ecf1;

  /* Semantic aliases */
  --bg-page: var(--paper);
  --bg-sunken: var(--paper-sunken);
  --surface-card: var(--surface);
  --surface-inset: var(--surface-2);
  --text-strong: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --text-on-accent: #fff9f0;
  --text-on-term: var(--term-fg);
  --border-subtle: var(--line);
  --border-default: var(--line-2);
  --border-ink: var(--line-strong);
  --focus-ring: var(--accent);

  /* Type - programming/monospace throughout (was Newsreader serif + Geist sans).
     Token names kept as -serif/-sans for now so this stays a one-line global
     lever per role; rename later once the font is locked in.
     --font-serif = headings, --font-sans = body, --font-mono = labels/prices. */
  /* Headings/labels stay monospace (brand accent); body/reading text is a clean
     system sans (Segoe UI on Windows, SF on macOS) for Microsoft-style legibility. */
  --font-serif: "Geist Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5.25rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.01em; /* eased from -0.02 - mono headings look cramped when too tight */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-mono: 0.02em;
  --tracking-label: 0.14em;

  /* Spacing & layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --container: 1200px;
  --container-text: 720px;
  --gutter: var(--space-6);

  /* Effects */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(40, 33, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(40, 33, 20, 0.06), 0 1px 2px rgba(40, 33, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(40, 33, 20, 0.07), 0 2px 4px rgba(40, 33, 20, 0.04);
  --shadow-lg: 0 12px 28px rgba(40, 33, 20, 0.1), 0 4px 8px rgba(40, 33, 20, 0.05);
  --shadow-hover: 0 16px 36px rgba(40, 33, 20, 0.12), 0 6px 12px rgba(40, 33, 20, 0.06);
  --ring: 0 0 0 3px rgba(180, 83, 9, 0.28);
  --wash-paper: radial-gradient(120% 80% at 100% 0%, #fbf4e6 0%, var(--paper) 55%);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --lift: -2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --lift: 0px;
  }
}

/* --- Base resets + element defaults (tokens carry the system) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
p {
  margin: 0;
}
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--accent-hover);
}
code, kbd, samp, pre {
  font-family: var(--font-mono);
}
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}
::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

@keyframes jkspin {
  to {
    transform: rotate(360deg);
  }
}

/* Article body - prose rendering for blog/lesson/course content. Capped measure
   + roomy leading keeps long-form readable now that body text is monospace. */
.article-body {
  max-width: 70ch;
  line-height: 1.75;
}
.article-body > * {
  margin: 0 0 var(--space-5);
}
.article-body h2,
.article-body h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-4);
}
.article-body h2 {
  font-size: var(--text-2xl);
}
.article-body h3 {
  font-size: var(--text-xl);
}
.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body ul,
.article-body ol {
  padding-left: 1.4em;
}
.article-body li {
  margin: 0 0 var(--space-2);
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.article-body blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  color: var(--ink-3);
  font-style: italic;
}
.article-body pre {
  background: var(--phosphor, #15140f);
  color: #e8e3d6;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.article-body :not(pre) > code {
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  color: var(--ink);
}

/* Homepage responsive collapses (single-column on small screens). */
@media (max-width: 860px) {
  .home-hero,
  .home-services,
  .home-articles,
  .ds-2col {
    grid-template-columns: 1fr !important;
  }
}

/* Admin pages: left-aligned, full width within the content area.
   Overrides the DS Container's centering/max-width/padding so list pages,
   filters, and tables sit flush against the sidebar (the layout supplies padding). */
.admin-content > * {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* TipTap rich-text editor surface (admin). */
.tiptap-input {
  outline: none;
  min-height: 220px;
}
.tiptap-input:focus,
.tiptap-input:focus-visible {
  outline: none;
}
.tiptap-input > :first-child {
  margin-top: 0;
}
.tiptap-input p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--ink-4);
  float: left;
  height: 0;
  pointer-events: none;
}