/* ─────────────────────────────────────────────────────────────
   Chakudya Nutrition Registry - Design tokens

   Signature idea: this is a nutrition-facts panel rendered as a
   developer tool. Structural labels (eyebrows, section titles)
   borrow the thick-rule, tight-caps grammar of a real nutrition
   label instead of decorative colored text. Palette is grounded in
   Malawi's food and land rather than generic "premium editorial":
   a deep lakeside charcoal, a ripe-marigold accent (nsima's maize,
   not a muted corporate gold), and a cassava-leaf green for
   affirmative states.
   ───────────────────────────────────────────────────────────── */

:root {
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 16px;

  --header-h: 96px;
  --sidebar-w: 288px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.06);
  --shadow-md: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
  --shadow-lg: 0 20px 52px rgba(0,0,0,.32), 0 4px 14px rgba(0,0,0,.14);

  /* method badge colors - same in both themes */
  --method-get: #4C8DFF;
  --method-get-bg: rgba(76,141,255,.14);
  --method-post: #3FA66B;
  --method-post-bg: rgba(63,166,107,.14);
  --method-put: #D9A441;
  --method-put-bg: rgba(217,164,65,.16);
  --method-patch: #A387EE;
  --method-patch-bg: rgba(163,135,238,.16);
  --method-delete: #E2574C;
  --method-delete-bg: rgba(226,87,76,.14);

  --focus-ring: 0 0 0 3px rgba(230,146,20,.45);
}

html[data-theme="dark"] {
  --method-get: #78abff;
  --method-delete: #f0766b;
  --bg: #0e1210;
  --bg-raised: #141a17;
  --surface: #1a211d;
  --surface-hover: #212a25;
  --surface-active: #29332c;
  --border: #263029;
  --border-strong: #38443b;

  --text-primary: #eef1ec;
  --text-secondary: #9fa89f;
  --text-tertiary: #8b948b;

  --accent: #e69214;
  --accent-strong: #ffb03e;
  --accent-ink: #1d1102;
  --accent-bg: rgba(230,146,20,.14);

  --green: #4caf7d;
  --green-bg: rgba(76,175,125,.14);
  --red: #e2685c;
  --red-bg: rgba(226,104,92,.14);
  --blue: #4c8dff;

  --code-bg: #10140f;
  --code-border: #232c26;
  --scrollbar: #38443b;
}

html[data-theme="light"] {
  --method-get: #1d4ed8;
  --method-post: #17673f;
  --method-put: #7a5200;
  --method-patch: #5b3bc4;
  --method-delete: #b3261e;
  --bg: #f2f3ed;
  --bg-raised: #ffffff;
  --surface: #ffffff;
  --surface-hover: #eaece2;
  --surface-active: #e0e3d5;
  --border: #dcdfd2;
  --border-strong: #c5c9b7;

  --text-primary: #181c16;
  --text-secondary: #4f5748;
  --text-tertiary: #62695a;

  --accent: #b25d04;
  --accent-strong: #9b5405;
  --accent-ink: #ffffff;
  --accent-bg: rgba(197,106,6,.10);

  --green: #1a6f45;
  --green-bg: rgba(31,122,77,.10);
  --red: #a8321f;
  --red-bg: rgba(191,58,44,.10);
  --blue: #1d4ed8;

  --code-bg: #eceee4;
  --code-border: #dcdfd2;
  --scrollbar: #c5c9b7;
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

img, svg, table { max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--text-primary); }

a { color: inherit; }

code, pre, kbd, .mono { font-family: var(--font-mono); }

::selection { background: var(--accent-bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 2px solid var(--bg); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}