/* Bhojanveda design tokens — the single source of truth for colour and type.
   Linked directly by the content pages (c/, en/, about) and pulled in by
   ds/styles.css for the component pages, so both halves of the site resolve
   the same values.

   NOTE: the @import below MUST stay on the first line. CSS drops an @import
   that follows any style rule, which is why the webfonts never loaded. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&family=Noto+Sans+Devanagari:wght@400;600;700&display=swap');

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;          /* brand identity — large fills, borders, decoration */
  --color-accent-2: #7a8a5e;
  /* Accessible pairings. --color-accent is a 3.03:1 brand colour: it is not
     safe for text or for small controls. Use --color-accent-ink for anything
     read as text, and --color-accent-fill for a filled control that carries a
     --color-bg label. Both are AA against --color-bg and --color-surface. */
  --color-accent-ink: #8c491a;      /* 5.72:1 on bg · 5.09:1 on surface */
  --color-accent-fill: #9d5423;     /* 4.74:1 carrying a #f5ead8 label */
  --color-accent-2-ink: #56633f;    /* 5.43:1 on bg · 4.82:1 on surface */
  --color-border-strong: #82796a;   /* 3.61:1 — form borders need 3:1, dividers don't */
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* Devanagari is listed after the Latin face in both stacks: Figtree carries
     no Devanagari glyphs, so Hindi falls through per-glyph to Noto while Latin
     keeps the brand face.

     Headings are bilingual almost everywhere here — "सम अग्नि · Balanced" is the
     normal shape — so the heading face has to work in both scripts. Caprasimo
     has no Devanagari at all, which rendered such a heading half in a heavy
     Latin display face and half in a light Noto sans: two headings jammed
     together. Figtree 700 sits at the same visual weight as Noto Sans
     Devanagari 700, so both halves match.

     Caprasimo survives as --font-display for Latin-only brand moments, but it
     is NOT in the @import above — nothing used it and it was a wasted
     download. To use it, add family=Caprasimo back to the import too. */
  --font-heading: "Figtree", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-display: "Caprasimo", "Figtree", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Figtree", "Noto Sans Devanagari", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

/* Copyright line on every page's footer, without touching 253 individual
   files — this stylesheet is already linked from all of them. */
footer::after {
  content: "© Bhojanveda · bhojanveda.com — सामग्री कॉपी करने की अनुमति नहीं है · Content may not be reproduced without permission.";
  display: block;
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.65;
}

/* ── Jump rail ──────────────────────────────────────────────────────────────
   930 condition and food pages carry <div class="jump"> — a row of anchors to
   the remedy cards further down — and no rule anywhere styled it, so it
   rendered as run-together default-blue underlined links. Same reason the
   copyright line above lives here: this stylesheet is already linked from
   every one of those pages, so one block reaches all of them.

   Shaped as a horizontal pill rail. Pills are the one control that survives a
   long Devanagari label and a short one side by side, and a rail that scrolls
   beats a block that wraps to four ragged lines on a phone. The lead remedy —
   the one the card above already names — is filled rather than outlined, so
   the rail says where you are, not just where you can go. */
.jump {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0 0 14px;
  padding: 2px 0 6px;
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* 44px is the WCAG 2.5.8 minimum, the same one the breadcrumb and footer
     links are padded up to further down each page. */
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--color-divider, rgba(32, 30, 29, .16));
  border-radius: 999px;
  background: var(--color-neutral-100, #f9f4ed);
  color: var(--color-text, #201e1d);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.jump a.is-lead {
  background: var(--color-accent-fill, #9d5423);
  border-color: var(--color-accent-fill, #9d5423);
  color: #fff;
}
/* Hover only where there is a pointer: on a touch screen :hover sticks after
   the tap and leaves a pill looking selected when it is not. */
@media (hover: hover) {
  .jump a:hover {
    border-color: var(--color-accent-ink, #8c491a);
    background: var(--color-accent-100, #fff2eb);
  }
  .jump a.is-lead:hover {
    background: var(--color-accent-800, #643312);
    border-color: var(--color-accent-800, #643312);
  }
}
.jump a:active { transform: scale(.96); }
.jump a:focus-visible {
  outline: 2px solid var(--color-accent-ink, #8c491a);
  outline-offset: 2px;
}

/* The rail jumps to a card, and the header on these pages is sticky — without
   this the card lands underneath it. 70px is the header's 44px control plus
   its padding, rounded up. */
.card[id] { scroll-margin-top: 70px; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jump a { transition: none; }
  .jump a:active { transform: none; }
}