/* ==========================================================================
   niṣṭhā — design foundation
   Tokens + base components. Source of truth for colour, type, spacing,
   radius, shadow, focus and motion across every page.
   ========================================================================== */

:root {
  /* ---- brand palette (fixed values, do not alias away) ---- */
  --tiber:        #06392F; /* brand, cold pine-teal — niṣṭhā's own colour, never the customer card */
  --coffee-bean:  #40312F; /* warm dark — captions, dark panels */
  --tangerine:    #FF6E3A; /* single accent — CTAs, focus */
  --dill:         #4E6813; /* success */
  --cherry:       #74070E; /* danger */
  --paper:        #FBF8F3; /* warm base — ~70% of layout */

  /* ---- semantic tokens ---- */
  --color-ground:     var(--paper);
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F3EEE4;
  --color-ink:        var(--coffee-bean);
  --color-ink-soft:   #6B5D59;
  --color-ink-faint:  #9C9088;
  --color-brand:      var(--tiber);
  --color-brand-wash: #E7EEEC;
  --color-accent:      var(--tangerine);
  --color-accent-hi:   #E65A28;
  --color-accent-wash: #FFEEE5;
  --color-success:     var(--dill);
  --color-success-wash:#EEF1E2;
  --color-danger:      var(--cherry);
  --color-danger-wash: #F7E6E5;
  --hairline: rgba(6, 57, 47, .12);
  --hairline-strong: rgba(6, 57, 47, .22);

  /* ---- spacing — 8px base, generous macro ---- */
  --space-1: .5rem;   /*  8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px — gutter */
  --space-4: 2rem;    /* 32px */
  --space-5: 3rem;    /* 48px */
  --space-6: 4rem;    /* 64px */
  --space-7: 6rem;    /* 96px — section padding */

  /* ---- radius ---- */
  --radius-sm: 4px;   /* tags */
  --radius-md: 6px;   /* default: buttons, inputs, cards */
  --radius-pill: 999px; /* pills only — switch, pill badge */

  /* ---- shadow — none. structure comes from hairlines ---- */
  --shadow: none;

  /* ---- focus ---- */
  --focus-ring: 2px solid var(--tangerine);
  --focus-offset: 2px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2, 0, .2, 1);
  --dur-fast: 140ms;
  --dur-slow: 480ms;

  /* ---- layout ---- */
  --layout-max: 1200px;
  --layout-gutter: var(--space-3);

  color-scheme: light;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: "Hanken Grotesk", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.58;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
p { max-width: 64ch; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Typography
   ========================================================================== */

.display, h1, h2, h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0;
  color: var(--color-ink);
}
h1 { font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); }
h3 { font-size: 1.5rem; }

.wordmark {
  font-family: "Tiro Devanagari Sanskrit", "Noto Sans Devanagari", serif;
  color: var(--color-ink);
}

.mono, code, .mono-label, .badge, .tag {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: 500;
}

.lede { color: var(--color-ink-soft); max-width: 40ch; }

/* ==========================================================================
   Layout
   ========================================================================== */

.shell {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
  text-align: left;
}

.section { padding: var(--space-7) 0; border-top: 1px solid var(--hairline); }
.section:first-of-type { border-top: none; }

header.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--color-ground) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}

/* ==========================================================================
   Divider
   ========================================================================== */

.divider { border: none; border-top: 1px solid var(--hairline); margin: var(--space-4) 0; }
.divider.strong { border-top-color: var(--hairline-strong); }

/* ==========================================================================
   Button
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  padding: .75rem 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hi); border-color: var(--color-accent-hi); }
.btn-secondary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.btn-secondary:hover { background: #052D25; border-color: #052D25; }
.btn-ghost { background: var(--color-surface); color: var(--color-ink); border-color: var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--color-ink-faint); background: var(--color-surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   IconButton
   ========================================================================== */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-surface-2); border-color: var(--color-ink-faint); }

/* ==========================================================================
   Icon
   ========================================================================== */

.icon { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.75; }
.icon.sm { width: 1rem; height: 1rem; }
.icon.lg { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   Card
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card-title { font-family: "Instrument Serif", serif; font-size: 1.5rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.card-body { color: var(--color-ink-soft); margin: 0; }

/* ==========================================================================
   Field / Input / Select
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: .4rem; max-width: 28rem; }
.field label {
  font-size: .8rem; font-weight: 600; color: var(--color-ink);
}
.field .help { font-size: .8rem; color: var(--color-ink-faint); margin: 0; }
.field .error { font-size: .8rem; color: var(--color-danger); margin: 0; }
.field.has-error input,
.field.has-error select { border-color: var(--color-danger); }

.input, select.input {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: .95rem;
  padding: .65rem .85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-ink-faint); }
.input:hover { border-color: var(--color-ink-faint); }
.input:focus-visible { border-color: var(--color-accent); }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236B5D59' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
}

/* ==========================================================================
   Checkbox / Radio
   ========================================================================== */

.check, .radio {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--color-ink); cursor: pointer;
}
.check input, .radio input {
  appearance: none;
  width: 1.1rem; height: 1.1rem;
  border: 1.5px solid var(--hairline-strong);
  background: var(--color-surface);
  display: inline-grid; place-items: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.check input { border-radius: 4px; }
.radio input { border-radius: 50%; }
.check input:checked, .radio input:checked { border-color: var(--color-accent); background: var(--color-accent); }
.check input:checked::after {
  content: ""; width: .3rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.radio input:checked::after { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; }

/* ==========================================================================
   Switch
   ========================================================================== */

.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 2.4rem; height: 1.4rem; border-radius: var(--radius-pill);
  background: var(--hairline-strong);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff;
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch input:checked + .track { background: var(--color-accent); }
.switch input:checked + .track::after { transform: translateX(1rem); }

/* ==========================================================================
   Badge / Tag
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: var(--radius-pill);
  background: var(--color-brand-wash); color: var(--color-brand);
}
.badge.success { background: var(--color-success-wash); color: var(--color-success); }
.badge.danger  { background: var(--color-danger-wash); color: var(--color-danger); }
.badge.accent  { background: var(--color-accent-wash); color: var(--color-accent-hi); }

.tag {
  display: inline-flex; align-items: center;
  font-size: .72rem; padding: .2rem .45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Dialog
   ========================================================================== */

dialog.dialog {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 26rem;
  width: calc(100% - 2rem);
  color: var(--color-ink);
}
dialog.dialog::backdrop { background: rgba(64, 49, 47, .35); }
dialog.dialog .dialog-title { font-family: "Instrument Serif", serif; font-size: 1.5rem; margin: 0 0 .6rem; }
dialog.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: var(--space-3); }