/* css/base.css - Naapu design tokens & base reset */
:root{
  --paper:#F6EFDC; --paper2:#EDE3C8; --card:#FFFBEF; --ink:#2B2118;
  --tomato:#E4572E; --mustard:#F3B73B; --leaf:#4C9F70; --sky:#6FB1D6; --blush:#F4A58A;
  --wood:#B9783F; /* Gaj Baba only */
  --line:3px;
  --r1:12px 15px 11px 14px;      /* thoda tedha radius: button, input */
  --r2:16px 12px 15px 11px;      /* card */
  --shadow:3px 3px 0 var(--ink); /* hard shadow, blur 0 */
  --font:'Patrick Hand','Segoe Print','Comic Sans MS',cursive;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --ease:cubic-bezier(.2,.7,.4,1);
}

@font-face{
  font-family:'Patrick Hand';
  src:url('../assets/PatrickHand-Regular.ttf') format('truetype');
  font-display:swap;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-weight:normal;
}

html{
  -webkit-text-size-adjust:100%;
  min-width:320px;
}

body{
  background:var(--paper);
  color:var(--ink);
  font:20px/26px var(--font);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  min-width:320px;
  min-height:100vh;
  min-height:100dvh;
}

:focus-visible{
  outline:3px dashed var(--tomato);
  outline-offset:3px;
}

[hidden]{
  display:none !important;
}

/* Accessibility screen-reader only */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Mobile responsive constraints (Chapter 10.1 #17) */
@media (max-width: 340px){
  body{
    font:18px/24px var(--font);
  }
}

/* Container constraints & Safe area (Chapter 4.4) */
main{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

/* Screen transition */
main > section{
  width:100%;
}

main > section.enter{
  animation:enter 160ms ease-out;
}

@keyframes enter{
  from{ opacity:0; transform:translateX(16px); }
  to{ opacity:1; transform:translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  main > section.enter{
    animation:none !important;
  }
}

/* Typography classes (Chapter 4.3) */
.display{ font-size:40px; line-height:44px; }
h1, .h1{ font-size:32px; line-height:36px; }
h2, .h2{ font-size:26px; line-height:30px; }
p, .body{ font-size:20px; line-height:26px; }
.small{ font-size:16px; line-height:20px; }
.bignum{ font-size:56px; line-height:56px; }
@media (max-width: 340px){
  .bignum{ font-size:48px; line-height:48px; }
}
.ruler-label{ font-size:14px; line-height:14px; }

/* FX overlay layer */
#fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
}