/* Afflow Design Tokens */
:root {
  /* Warm Indian palette */
  --ivory: #FBF6EF;
  --ivory-2: #F3EADA;
  --ivory-3: #EADFCB;
  --ink: #181613;
  --ink-2: #3A342C;
  --ink-3: #6B6358;
  --ink-muted: #948A7D;
  --rule: #E2D6BF;
  --rule-strong: #C9B896;

  --terracotta: #C14A1F;
  --terracotta-deep: #9A3A15;
  --terracotta-soft: #E9B7A0;
  --saffron: #E8A33B;
  --saffron-soft: #F4D9A5;
  --forest: #1F3A2E;
  --forest-soft: #C8D6CD;
  --indigo: #2B3A67;

  /* Semantic */
  --bg: var(--ivory);
  --bg-raised: #FFFFFF;
  --bg-sunken: var(--ivory-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --accent: var(--terracotta);
  --accent-2: var(--saffron);

  /* Type */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-4xl: 3rem;
  --t-5xl: 4rem;
  --t-6xl: 5.25rem;

  /* Spacing baseline */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --max-w: 1240px;
  --max-w-prose: 720px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--terracotta); color: var(--ivory); }

/* --- Primitives --- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.wrap-prose { max-width: var(--max-w-prose); margin: 0 auto; padding: 0 24px; }

.display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; }
.mono { font-family: var(--f-mono); }
.kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: var(--f-ui);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--ivory); }
.btn-primary:hover { background: var(--terracotta); }
.btn-accent { background: var(--terracotta); color: var(--ivory); }
.btn-accent:hover { background: var(--terracotta-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--ivory-2); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ivory-2); color: var(--fg-2);
  border: 1px solid var(--rule);
  font-size: 12px; font-family: var(--f-mono); letter-spacing: 0.04em;
}
.pill-accent { background: var(--terracotta); color: var(--ivory); border-color: var(--terracotta); }
.pill-saffron { background: var(--saffron-soft); color: var(--ink); border-color: var(--saffron); }

.rule { border-top: 1px solid var(--rule); }

/* Jali / lattice divider */
.jali {
  height: 28px;
  background-image:
    linear-gradient(45deg, transparent 46%, var(--rule-strong) 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--rule-strong) 46% 54%, transparent 54%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  opacity: 0.55;
}

/* Notch frame — a reduced "temple bracket" */
.notch {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.notch::before, .notch::after,
.notch > .n-tl, .notch > .n-tr, .notch > .n-bl, .notch > .n-br {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--ink);
  content: "";
}
.notch::before { top: -1px; left: -1px; clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 35%, 35% 100%, 0 100%); }
.notch::after  { top: -1px; right: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 65% 35%, 0 35%); }
.notch > .n-bl { bottom: -1px; left: -1px; clip-path: polygon(0 0, 35% 0, 35% 65%, 100% 65%, 100% 100%, 0 100%); }
.notch > .n-br { bottom: -1px; right: -1px; clip-path: polygon(65% 0, 100% 0, 100% 100%, 0 100%, 0 65%, 65% 65%); }

/* Section paddings */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section-lg { padding: 80px 0; }
  :root {
    --t-4xl: 2.25rem;
    --t-5xl: 2.75rem;
    --t-6xl: 3.25rem;
  }
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--ivory) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--ink); color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 18px;
}
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.nav-links a { color: var(--fg-2); }
.nav-links a:hover { color: var(--terracotta); }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* Footer */
.footer { background: var(--ink); color: var(--ivory); padding: 80px 0 40px; }
.footer a { color: color-mix(in oklab, var(--ivory) 75%, transparent); font-size: 14px; }
.footer a:hover { color: var(--saffron); }
.footer h5 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 55%, transparent); margin: 0 0 16px; font-weight: 400; }

/* Striped placeholder — for "drop an image here" */
.ph {
  background:
    repeating-linear-gradient(-45deg, var(--ivory-2), var(--ivory-2) 10px, var(--ivory-3) 10px, var(--ivory-3) 20px);
  color: var(--fg-3);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-transform: uppercase;
}

/* Inline code receipt — for showing INR amounts, PANs, GSTIN */
.receipt {
  font-family: var(--f-mono);
  font-size: 12.5px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--ink);
}