/* Apothecary / Botanical design tokens
   Warm earthy neutrals — parchment, ink, sage, terracotta */

:root {
  /* Surfaces — parchment-toned */
  --bg: oklch(96% 0.012 80);          /* parchment */
  --bg-2: oklch(93% 0.014 80);        /* slightly darker parchment */
  --bg-3: oklch(89% 0.016 78);        /* card divider, hover */
  --surface: oklch(98% 0.008 82);     /* card surface */
  --surface-sunken: oklch(91% 0.014 80);

  /* Ink — warm near-blacks */
  --ink: oklch(22% 0.012 60);         /* primary text */
  --ink-2: oklch(38% 0.012 60);       /* secondary text */
  --ink-3: oklch(56% 0.014 65);       /* tertiary, captions */
  --ink-4: oklch(72% 0.014 70);       /* faint, dividers */

  /* Lines */
  --line: oklch(82% 0.014 75);
  --line-strong: oklch(68% 0.016 70);

  /* Accents — share chroma 0.08, lightness 52% */
  --sage: oklch(52% 0.06 145);        /* primary action / good */
  --sage-2: oklch(64% 0.05 145);
  --sage-soft: oklch(88% 0.03 145);

  --terracotta: oklch(58% 0.10 40);   /* warning / consumed */
  --terracotta-soft: oklch(90% 0.04 40);

  --amber: oklch(68% 0.10 75);        /* low stock / attention */
  --amber-soft: oklch(91% 0.04 75);

  --plum: oklch(48% 0.06 340);        /* secondary accent */

  /* Typography */
  --serif: "Cormorant Garamond", "GT Sectra", "Playfair Display", Georgia, serif;
  --sans: "Inter", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Touch targets */
  --touch-min: 44px;

  /* Shadow — subtle */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 60 / 0.06);
  --shadow-md: 0 2px 8px oklch(20% 0.02 60 / 0.08);
  --shadow-lg: 0 8px 24px oklch(20% 0.02 60 / 0.10);
}

[data-theme="dark"] {
  --bg: oklch(20% 0.012 60);
  --bg-2: oklch(23% 0.012 60);
  --bg-3: oklch(27% 0.014 65);
  --surface: oklch(25% 0.012 60);
  --surface-sunken: oklch(18% 0.012 60);

  --ink: oklch(94% 0.008 80);
  --ink-2: oklch(78% 0.012 75);
  --ink-3: oklch(62% 0.014 70);
  --ink-4: oklch(46% 0.014 65);

  --line: oklch(34% 0.014 65);
  --line-strong: oklch(48% 0.016 65);

  --sage: oklch(70% 0.07 145);
  --sage-2: oklch(60% 0.06 145);
  --sage-soft: oklch(32% 0.04 145);

  --terracotta: oklch(70% 0.10 40);
  --terracotta-soft: oklch(32% 0.05 40);

  --amber: oklch(78% 0.10 75);
  --amber-soft: oklch(32% 0.05 75);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* Subtle parchment texture */
.parchment {
  background-image:
    radial-gradient(oklch(85% 0.03 75 / 0.15) 1px, transparent 1px),
    radial-gradient(oklch(80% 0.03 75 / 0.10) 1px, transparent 1px);
  background-size: 24px 24px, 36px 36px;
  background-position: 0 0, 12px 18px;
}

/* Utility */
.serif { font-family: var(--serif); font-weight: 500; }
.mono { font-family: var(--mono); font-feature-settings: "ss01", "cv11"; }
.smallcaps {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 500;
}
.hairline { border-top: 1px solid var(--line); }