/* ============================================================
   Design Tokens — नेपालमा बाँस (from Google Stitch design)
   ============================================================ */

:root {
  /* Brand / content colors */
  --color-primary: #154212;
  --color-primary-container: #2d5a27;
  --color-primary-fixed: #bcf0ae;
  --color-primary-fixed-dim: #a1d494;
  --color-on-primary: #ffffff;
  --color-on-primary-fixed-variant: #23501e;
  --color-bamboo-leaf: #2d5a27;
  --color-bamboo-stem: #4a773c;

  /* Surfaces & text */
  --color-background: #fcf9f8;
  --color-paper: #f9faf7;
  --color-surface: #fcf9f8;
  --color-surface-low: #f6f3f2;
  --color-surface-variant: #e5e2e1;
  --color-ink: #1a1a1a;
  --color-on-surface-variant: #42493e;
  --color-meta-grey: #7b7b7b;
  --color-divider: #e8e9e1;
  --color-outline-variant: #c2c9bb;

  /* Focus / selection */
  --color-focus: #3d6930;
  --color-error: #ba1a1a;

  /* Typography */
  --font-heading: 'Noto Sans Devanagari', 'Yantramanav', sans-serif;
  --font-body: 'Noto Sans Devanagari', sans-serif;
  --font-ui: 'Yantramanav', 'Noto Sans Devanagari', system-ui, sans-serif;

  --fs-display: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);       /* 32 → 40, Source Serif 4 */
  --fs-title-lg: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22 → 28, Source Serif 4 */
  --fs-title: 1.375rem;                                     /* 22, Source Serif 4 */
  --fs-body-lg: 1.125rem;                                   /* 18 */
  --fs-body: 1rem;                                          /* 16 */
  --fs-caption: 0.8125rem;                                  /* 13 */
  --fs-label: 0.75rem;                                      /* 12 */
  --fs-nav: 0.9375rem;                                      /* 15 */

  --lh-tight: 1.2;
  --lh-title-lg: 1.21;
  --lh-title: 1.27;
  --lh-body-lg: 1.67;
  --lh-body: 1.63;
  --lh-caption: 1.38;
  --lh-label: 1.33;

  --ls-label: 0.05em;

  /* Shape */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-full: 12px;

  /* Layout */
  --container-width: 1280px;
  --gutter: 24px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --header-height: 64px;
  --header-topbar: 34px;
  --header-total: calc(var(--header-height) + var(--header-topbar));

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-med: 300ms;
}