/* Hallmark · Postli design system · Obsidian theme · v1.1 (Graphite paper-band) */

:root {
  /* ====== Surface (Graphite — lifted from v1.0 Carbon) ====== */
  --color-paper:        oklch(20% 0.008 250);
  --color-paper-2:      oklch(23% 0.009 250);
  --color-paper-3:      oklch(27% 0.010 250);
  --color-paper-4:      oklch(31% 0.011 250);

  /* ====== Ink ====== */
  --color-ink:          oklch(96% 0.005 250);
  --color-ink-dim:      oklch(72% 0.010 250);
  --color-ink-mute:     oklch(54% 0.012 250);
  --color-ink-faint:    oklch(40% 0.012 250);

  /* ====== Rules (stepped up to stay visible on lighter paper) ====== */
  --color-rule:         oklch(33% 0.012 250);
  --color-rule-strong:  oklch(42% 0.013 250);

  /* ====== Accent (restrained Postli green) ====== */
  --color-accent:       oklch(70% 0.13 162);
  --color-accent-2:     oklch(76% 0.15 160);
  --color-accent-ink:   oklch(15% 0.04 162);
  --color-accent-quiet: oklch(48% 0.07 162);
  --color-focus:        oklch(80% 0.16 162);

  /* ====== Status ====== */
  --color-danger:       oklch(64% 0.18 25);
  --color-warn:         oklch(78% 0.13 75);

  /* ====== Typography ====== */
  --font-display: "Instrument Serif", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:        0.75rem;
  --text-sm:        0.8125rem;
  --text-base:      1rem;
  --text-md:        1.125rem;
  --text-lg:        1.375rem;
  --text-xl:        1.75rem;
  --text-2xl:       2.25rem;
  --text-3xl:       2.875rem;
  --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 4.75rem);

  /* ====== Spacing (4-pt scale) ====== */
  --space-3xs:  0.25rem;
  --space-2xs:  0.5rem;
  --space-xs:   0.75rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4.5rem;
  --space-3xl:  7rem;
  --page-gutter: clamp(1.25rem, 3vw, 2rem);
  --page-maxw:  1320px;
  --read-maxw:  65ch;

  /* ====== Radii ====== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ====== Rules ====== */
  --rule-hair: 1px;

  /* ====== Motion ====== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 120ms;
  --dur-short:   200ms;
  --dur-mid:     360ms;

  /* ====== Elevation ====== */
  --shadow-soft:   0 1px 0 oklch(100% 0 0 / 0.04) inset,
                   0 8px 24px -16px oklch(0% 0 0 / 0.6);
  --shadow-lifted: 0 1px 0 oklch(100% 0 0 / 0.06) inset,
                   0 20px 50px -24px oklch(0% 0 0 / 0.8);
}

/* ====== Base reset ====== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
html { overflow-x: clip; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--color-accent-quiet); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}