/* Hisaab — modern CSS only. No Tailwind, no preprocessor. oklch + container queries + view transitions. */

@layer reset, base, layout;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg, canvas { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  input { font: inherit; color: inherit; }
}

@layer base {
  :root {
    --ink: oklch(96% 0.02 80);
    --ink-dim: oklch(78% 0.04 80 / 0.7);
    --ink-faint: oklch(60% 0.04 80 / 0.5);
    --paper: oklch(11% 0.03 280);
    --paper-up: oklch(15% 0.04 280);
    --paper-card: oklch(17% 0.05 280);
    --rule: oklch(28% 0.05 280 / 0.4);
    --saffron: oklch(78% 0.16 65);
    --saffron-dim: oklch(66% 0.14 60);
    --rose: oklch(68% 0.19 25);
    --gold: oklch(85% 0.13 92);
    --leaf: oklch(72% 0.15 145);
    --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --hindi: 'Tiro Devanagari Hindi', 'Mukta', serif;
    --mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;
    --body: 'Cormorant Garamond', Georgia, serif;
    --tx-snap: cubic-bezier(0.32, 0.72, 0, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  ::selection { background: var(--saffron); color: var(--paper); }
}

@layer layout {
  main {
    max-width: min(640px, 100%);
    margin-inline: auto;
    padding: calc(var(--safe-top) + 12px) 20px calc(var(--safe-bottom) + 80px);
    container-type: inline-size;
    display: grid;
    gap: 18px;
  }

  hisaab-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--paper);
  }

  hisaab-gate[hidden] {
    display: none;
  }
}

/* View Transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 480ms;
  animation-timing-function: var(--tx-snap);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}